/* ============================================
   SUPPORT & SHOP – MODULE STYLES (modules.css)
   ============================================
   Every rule below is scoped to a single module
   container. Changing one block will NEVER leak
   into another module.

   ============================================ */


/* ============================================
   MODULE 1: CAUSE SELECTOR
   Container: .cause-selector
   ============================================ */
.cause-selector {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px auto 20px;
}
.cause-selector-module-wrapper{
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); 
    margin-bottom: 30px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.cause-selector .cause-toggle {
  display: inline-block;
  background: linear-gradient(135deg, #6eb5cf, #102a6f);
  color: white;
  padding: 16px 32px;
  border-radius: 40px;
  text-decoration: none;
  font-weight: 700;
  margin: 5px 0;
  font-size: 18px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: none;
  outline: none;
  cursor: pointer;
}

.cause-selector .cause-toggle:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.cause-selector .cause-arrow {
  /* arrow span inside toggle – no extra styles needed */
}

.cause-selector .cause-pills {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 6px 0 12px 0;
  flex-wrap: nowrap;
}

.cause-selector .cause-pills button {
  font-size: 12px;
  padding: 4px 8px;
  min-width: 60px;
  max-width: 160px;
  border-radius: 28px;
  border: none;
  outline: none;
  background: #6eb5cf;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cause-selector .cause-pills button:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.cause-selector .cause-pills button.active {
  background: #102a6f;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.cause-selector .cause-panel {
  position: absolute;
  top: calc(100% + 10px);
  width: 320px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
  padding: 14px;
  opacity: 0;
  transform: translateY(-10px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 50;
}

.cause-selector .cause-panel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.cause-selector .cause-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 260px;
  overflow-y: auto;
}

.cause-selector .cause-list li {
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

.cause-selector .cause-list li:hover {
  background: rgba(0, 0, 0, 0.08);
}

.cause-selector .cause-list li.active {
  background: rgba(0, 0, 0, 0.1);
  font-weight: 700;
  cursor: default;
}


/* ============================================
   MODULE 2: BIO / CURRENTLY SUPPORTING
   Container: .bio-wrapper
   ============================================ */
.bio-wrapper {
  background: #fff;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  margin-top: 30px;
  margin-bottom: 30px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.bio-wrapper .widget-title {
  font-size: clamp(1.2rem, 4.5vw, 1.5rem);
  font-weight: 700;
  text-align: center;
  margin: 0 0 12px 0;
  line-height: 1.2;
  color: #333;
}

.bio-wrapper .org-logo-container {
  width: 140px;
  margin: 10px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.bio-wrapper .org-logo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease;
}

.bio-wrapper .org-logo:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.bio-wrapper h1 {
  margin-bottom: 0;
  font-size: 24px;
  text-transform: uppercase;
}

.bio-wrapper .bio {
  font-size: 14px;
  margin-bottom: 20px;
}

@media (max-width: 480px) {
  .bio-wrapper .org-logo-container {
    width: 120px;
    height: 120px;
  }
  .bio-wrapper h1{
    font-size: 16px;
  }
  .bio-wrapper .org-logo {
    width: 100%;
    height: 100%;
  }
}


/* ============================================
   MODULE 3: QUICK LINKS
   Container: .quick-links-wrapper
   ============================================ */
.quick-links-wrapper {
  background: #fff;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  margin-top: 30px;
  margin-bottom: 30px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.quick-links-wrapper .widget-title {
  font-size: clamp(1.2rem, 4.5vw, 1.5rem);
  font-weight: 700;
  text-align: center;
  margin: 0 0 12px 0;
  line-height: 1.2;
  color: #333;
}

.quick-links-wrapper .quick-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.quick-links-wrapper .quick-link-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.quick-links-wrapper .quick-link-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff7b00, #ff0095);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.quick-links-wrapper .quick-link-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}

.quick-links-wrapper .quick-link-btn img {
  width: 26px;
  height: 26px;
  display: block;
  filter: brightness(0) invert(1);
}

.quick-links-wrapper .quick-link-label {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #444;
  white-space: nowrap;
  text-align: center;
}

@media (max-width: 480px) {
  .quick-links-wrapper .quick-link-btn {
    width: 48px;
    height: 48px;
  }

  .quick-links-wrapper .quick-link-btn img {
    width: 22px;
    height: 22px;
  }

  .quick-links-wrapper .quick-link-label {
    font-size: 10px;
  }
}


/* ============================================
   MODULE 4: SUPPORTER IMPACT
   Container: .supporter-impact-wrapper
   ============================================ */
.supporter-impact-wrapper {
  background: #fff;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  margin-top: 30px;
  margin-bottom: 30px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.supporter-impact-wrapper .widget-title {
  font-size: clamp(1.2rem, 4.5vw, 1.5rem);
  font-weight: 700;
  text-align: center;
  margin: 0 0 12px 0;
  line-height: 1.2;
  color: #333;
}

.supporter-impact-wrapper .current-total-label,
.supporter-impact-wrapper .next-goal-label {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 0;
}

.supporter-impact-wrapper .current-total-value,
.supporter-impact-wrapper .next-goal-amount {
  font-size: 1.25rem;
  font-weight: bold;
  margin-top: 2px;
  margin-bottom: 10px;
}

.supporter-impact-wrapper .next-goal-label-full {
  display: block;
  margin-bottom: 4px;
  font-size: 0.95rem;
  color: #666;
}

.supporter-impact-wrapper .goal-bar-wrapper {
  width: 100%;
  margin-top: 4px;
}

.supporter-impact-wrapper .goal-bar-background {
  width: 100%;
  height: 18px;
  background: #f0f0f0;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 4px;
}

.supporter-impact-wrapper .goal-bar-progress {
  width: 0%;
  height: 100%;
  background: linear-gradient(135deg, #ff7b00, #ff0095);
  border-radius: 8px 0 0 8px;
  transition: width 2s ease-in-out;
}

.supporter-impact-wrapper .goal-bar-values {
  display: none !important;
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-weight: bold;
  font-size: 0.9rem;
  margin-top: -4px;
}

.supporter-impact-wrapper .goal-left,
.supporter-impact-wrapper .goal-right {
  color: #444;
}

@media (max-width: 480px) {
  .supporter-impact-wrapper {
    padding: 20px;
  }

  .supporter-impact-wrapper .current-total-value,
  .supporter-impact-wrapper .next-goal-amount,
  .supporter-impact-wrapper .goal-left,
  .supporter-impact-wrapper .goal-right {
    font-size: 1.1rem;
  }

  .supporter-impact-wrapper .goal-bar-background {
    height: 12px;
  }

  .supporter-impact-wrapper .next-goal-label-full {
    font-size: 1rem;
  }
}


/* ============================================
   MODULE 5: AMAZON SPOTLIGHT
   Mount:     #amazon-widget
   Generated: #modulesCarouselWrapper (inside)
   ============================================ */
#amazon-widget #modulesCarouselWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 480px;
  margin: 30px auto 0;
  padding: 20px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 10;
}

#amazon-widget .widget-title {
  font-size: clamp(1.2rem, 4.5vw, 1.5rem);
  font-weight: 700;
  text-align: center;
  margin: 0 0 12px 0;
  line-height: 1.2;
  color: #333;
}

#amazon-widget #modulesDynamicTitle {
  font-weight: 600;
  margin: 0 0 12px 0;
  text-align: center;
  font-size: 18px;
}

#amazon-widget #modulesCarouselContainer {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  touch-action: pan-y;
  margin-bottom: 15px;
}

#amazon-widget #modulesTrack {
  display: flex;
  width: 100%;
  transition: transform 0.4s ease;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

#amazon-widget #modulesTrack .carousel-card {
  min-width: 100%;
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 0 16px;
  text-decoration: none;
}

#amazon-widget #modulesTrack .carousel-card img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  border: 4px solid #fff;
  background: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#amazon-widget #modulesTrack .carousel-card:hover img {
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

#amazon-widget #modulesCarouselContainer .modules-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border: none;
  font-size: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

#amazon-widget #modulesCarouselContainer:hover .modules-nav {
  opacity: 1;
}

#amazon-widget #modulesPrev {
  left: 8px;
}

#amazon-widget #modulesNext {
  right: 8px;
}

#amazon-widget .disclaimer {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 14px;
}

@media (max-width: 480px) {
  #amazon-widget #modulesCarouselWrapper {
    max-width: 100%;
    padding: 20px;
  }

  #amazon-widget #modulesTrack .carousel-card {
    padding: 0 10px;
  }

  #amazon-widget #modulesTrack .carousel-card img {
    width: 100%;
    height: auto;
    object-fit: contain;
    max-width: 100%;
  }

  #amazon-widget #modulesCarouselContainer .modules-nav {
    display: none !important;
  }

  #amazon-widget #modulesDynamicTitle {
    font-size: 18px;
    line-height: 1.2;
  }
}


/* ============================================
   MODULE 6: HOW YOU CAN HELP
   Mount:     #howtohelp-module
   Generated: .howto-container (inside)
   ============================================ */
#howtohelp-module .howto-container {
  background: #fff;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  margin-top: 30px;
  margin-bottom: 30px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

#howtohelp-module .widget-title {
  font-size: clamp(1.2rem, 4.5vw, 1.5rem);
  font-weight: 700;
  text-align: center;
  margin: 0 0 12px 0;
  line-height: 1.2;
  color: #333;
}

#howtohelp-module .howto-slides {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  touch-action: pan-y;
}

#howtohelp-module .howto-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  opacity: 0;
  transform: translateX(100%);
  transition: transform 0.8s ease, opacity 0.8s ease;
}

#howtohelp-module .howto-slide.show {
  opacity: 1;
  transform: translateX(0);
  z-index: 1;
}

#howtohelp-module .howto-slide.exit-left {
  opacity: 0;
  transform: translateX(-100%);
}

#howtohelp-module .howto-icon img {
  width: 110px;
  height: 110px;
  object-fit: contain;
}

#howtohelp-module .howto-text {
  font-size: 16px;
  line-height: 1.4;
  text-align: center;
  padding: 0 10px;
}

#howtohelp-module .howto-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 15px auto 10px;
  max-width: 480px;
}

#howtohelp-module .howto-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #6eb5cf;
  border: none;
  cursor: pointer;
}

#howtohelp-module .howto-dot.active {
  background: #102a6f;
}

@media (max-width: 480px) {
  #howtohelp-module .howto-container {
    padding: 15px 20px 20px 20px;
  }

  #howtohelp-module .howto-slides {
    height: auto;
    min-height: 200px;
    padding-bottom: 10px;
  }

  #howtohelp-module .howto-icon img {
    width: 90px;
    height: 90px;
  }

  #howtohelp-module .howto-text {
    font-size: 14px;
    padding: 0 10px;
  }

  #howtohelp-module .howto-dots {
    max-width: 100%;
  }
}


/* ============================================
   MODULE 7: WISH LISTS
   Container: .wish-list-wrapper
   ============================================ */
.wish-list-wrapper {
  background: #fff;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  margin-top: 30px;
  margin-bottom: 30px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.wish-list-wrapper .widget-title {
  font-size: clamp(1.2rem, 4.5vw, 1.5rem);
  font-weight: 700;
  text-align: center;
  margin: 0 0 12px 0;
  line-height: 1.2;
  color: #333;
}

.wish-list-wrapper .button {
  display: inline-block;
  background: linear-gradient(135deg, #ff7b00, #ff0095);
  color: white;
  padding: 16px 32px;
  border-radius: 40px;
  text-decoration: none;
  font-weight: 700;
  margin: 12px 0;
  font-size: clamp(14px, 4vw, 18px);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

.wish-list-wrapper .button:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.wish-list-wrapper .prime-link {
  display: block;
  margin-top: 5px;
  margin-bottom: 8px;
  font-size: 14px;
  color: #444;
  text-decoration: none;
}

.wish-list-wrapper .prime-link:hover {
  text-decoration: underline;
}

@media (max-width: 480px) {
  .wish-list-wrapper .button {
    padding: 14px 20px;
    font-size: 13px;
  }

}


/* ============================================
   MODULE 8: SUPPORT & SHOP (Shopping UK)
   Mount:     #shopping-module
   Generated: #modulesCarouselWrapper (inside)
   ============================================ */
#shopping-module #modulesCarouselWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 480px;
  margin: 30px auto 0;
  padding: 20px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 10;
}

#shopping-module .widget-title {
  font-size: clamp(1.2rem, 4.5vw, 1.5rem);
  font-weight: 700;
  text-align: center;
  margin: 0 0 12px 0;
  line-height: 1.2;
  color: #333;
}

/* Dropdown */
#shopping-module .modules-dropdown-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 15px;
}

#shopping-module #modulesDropdownBtn {
  background: linear-gradient(135deg, #ff7b00, #ff0095);
  color: white;
  padding: 12px 24px;
  border-radius: 28px;
  font-weight: 700;
  font-size: 16px;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  z-index: 20;
}

#shopping-module #modulesDropdownBtn:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

#shopping-module #modulesSelectedName {
  margin: 18px 0;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  font-size: 20px;
  line-height: 1.1;
  color: #333;
}

#shopping-module #modulesDropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 275px;
  z-index: 99999;
  max-height: 400px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#shopping-module #modulesDropdown.active {
  display: block;
}

#shopping-module #modulesDropdown div {
  padding: 10px 0;
  cursor: pointer;
  font-weight: 600;
  text-align: center;
}

#shopping-module #modulesDropdown div:hover {
  background: rgba(255, 123, 0, 0.1);
}

/* Main carousel */
#shopping-module #modulesCarouselContainer {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  touch-action: pan-y;
  margin-bottom: 15px;
}

#shopping-module #modulesTrack {
  display: flex;
  width: 100%;
  transition: transform 0.4s ease;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

#shopping-module #modulesTrack .carousel-card {
  min-width: 100%;
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 0 16px;
  text-decoration: none;
}

#shopping-module #modulesTrack .carousel-card img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  border: 4px solid #fff;
  background: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#shopping-module #modulesTrack .carousel-card:hover img {
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Nav arrows */
#shopping-module #modulesCarouselContainer .modules-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border: none;
  font-size: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

#shopping-module #modulesCarouselContainer:hover .modules-nav {
  opacity: 1;
}

#shopping-module #modulesPrev {
  left: 8px;
}

#shopping-module #modulesNext {
  right: 8px;
}

/* Dynamic title */
#shopping-module #modulesDynamicTitle {
  font-weight: 600;
  margin: 0 0 12px 0;
  text-align: center;
  font-size: 18px;
}

/* Sub-category carousel */
#shopping-module #modulesSubCarousel {
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  width: 100%;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

#shopping-module #modulesSubTrack {
  display: flex;
  flex-wrap: nowrap;
  gap: 15px;
}

#shopping-module #modulesSubTrack .carousel-card {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}

#shopping-module #modulesSubTrack .carousel-card img {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 10px;
}

#shopping-module #modulesSubTrack .card-title {
  font-size: 12px;
  margin-top: 6px;
  text-align: center;
  letter-spacing: 0.3px;
}

/* Disclaimer */
#shopping-module #modulesDisclaimer {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 14px;
}

/* Legacy carousel helpers (used by sub-track) */
#shopping-module .carousel-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 25px;
  scroll-behavior: smooth;
  display: flex;
  justify-content: center;
}

#shopping-module .carousel-wrapper::-webkit-scrollbar {
  height: 8px;
}

#shopping-module .carousel-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

#shopping-module .carousel-wrapper::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

#shopping-module .carousel-container {
  display: flex;
  gap: 15px;
  justify-content: flex-start;
  width: auto;
  max-width: calc(140px * 3 + 30px);
}

#shopping-module .carousel-container .carousel-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  flex: 0 0 auto;
}

#shopping-module .carousel-container .carousel-card img {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 4px;
  border: 3px solid #fff;
  box-sizing: border-box;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#shopping-module .carousel-container .carousel-card img:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

#shopping-module .carousel-container .card-title {
  margin-top: 8px;
  font-size: 12px;
  text-align: center;
  text-transform: uppercase;
  color: #444;
  word-wrap: break-word;
  max-width: 140px;
}

/* Legacy shopping widget helpers */
#shopping-module .support-shop-logo-container {
  width: auto;
  height: auto;
  margin: 10px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

#shopping-module .support-shop-logo-container img {
  width: 140px;
  height: auto;
  object-fit: contain;
  display: block;
  transition: transform 0.2s ease;
}

#shopping-module .support-shop-logo-container img:hover {
  transform: scale(1.05);
}

#shopping-module .widget-selector {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  position: relative;
}

#shopping-module .widget-selector button {
  background: linear-gradient(135deg, #ff7b00, #ff0095);
  color: white;
  padding: 12px 24px;
  border-radius: 28px;
  font-weight: 700;
  font-size: 16px;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-width: 200px;
}

#shopping-module .widget-selector button:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

#shopping-module .dropdown {
  display: none;
  position: absolute;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  margin-top: 5px;
  min-width: 180px;
  z-index: 10;
  left: 50%;
  transform: translateX(-50%);
}

#shopping-module .dropdown.active {
  display: block;
}

#shopping-module .dropdown div {
  padding: 10px 15px;
  cursor: pointer;
  text-align: center;
  font-weight: 600;
}

#shopping-module .dropdown div:hover {
  background: rgba(255, 123, 0, 0.1);
}

#shopping-module .widget-disclosure {
  font-size: 14px;
  margin: 10px 0 15px 0;
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  white-space: pre-line;
}

@media (max-width: 480px) {
  #shopping-module #modulesCarouselWrapper {
    max-width: 100%;
    padding: 20px;
  }
  #shopping-module #modulesDropdownBtn{
    font-size: 13px;
  }
  #shopping-module #modulesTrack .carousel-card {
    padding: 0 10px;
  }

  #shopping-module #modulesTrack .carousel-card img {
    width: 100%;
    height: auto;
    object-fit: contain;
    max-width: 100%;
  }

  #shopping-module #modulesSubTrack .carousel-card img {
    width: 100px;
    height: 100px;
    border-radius: 0;
  }

  #shopping-module #modulesSubTrack {
    gap: 12px;
  }

  #shopping-module #modulesCarouselContainer .modules-nav {
    display: none !important;
  }

  #shopping-module #modulesDynamicTitle {
    font-size: 18px;
    line-height: 1.2;
  }

  #shopping-module #modulesSelectedName {
    font-size: 18px;
    line-height: 1.1;
  }

  #shopping-module .carousel-container .carousel-card img {
    width: 100px;
    height: 100px;
  }

  #shopping-module .carousel-container .card-title {
    font-size: 10px;
    max-width: 100px;
  }

  #shopping-module .carousel-container {
    max-width: calc(100px * 3 + 30px);
  }

  #shopping-module .widget-selector button {
    font-size: 14px;
    padding: 10px 20px;
    min-width: 150px;
  }

  #shopping-module .widget-disclosure {
    font-size: 12px;
  }

  #shopping-module .support-shop-logo-container {
    width: 120px;
  }

  #shopping-module .support-shop-logo-container img {
    width: 100%;
  }
}


/* ============================================
   MODULE 9: FEATURED BRANDS
   Mount:     #featuredbrands-module
   Generated: #modulesCarouselWrapper (inside)
   ============================================ */
#featuredbrands-module #modulesCarouselWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 480px;
  margin: 30px auto 0;
  padding: 20px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 10;
}

#featuredbrands-module .widget-title {
  font-size: clamp(1.2rem, 4.5vw, 1.5rem);
  font-weight: 700;
  text-align: center;
  margin: 0 0 12px 0;
  line-height: 1.2;
  color: #333;
}

#featuredbrands-module #modulesDynamicTitle {
  font-weight: 600;
  margin: 0 0 12px 0;
  text-align: center;
  font-size: 18px;
}

#featuredbrands-module #modulesDynamicBranddesc {
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 14px;
}

#featuredbrands-module #modulesDynamicDisclosure {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 14px;
}

#featuredbrands-module #modulesCarouselContainer {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  touch-action: pan-y;
  margin-bottom: 15px;
}

#featuredbrands-module #modulesTrack {
  display: flex;
  width: 100%;
  transition: transform 0.4s ease;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

#featuredbrands-module #modulesTrack .carousel-card {
  min-width: 100%;
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 0 16px;
  text-decoration: none;
}

#featuredbrands-module #modulesTrack .carousel-card img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  border: 4px solid #fff;
  background: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#featuredbrands-module #modulesTrack .carousel-card:hover img {
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

#featuredbrands-module #modulesCarouselContainer .modules-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border: none;
  font-size: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

#featuredbrands-module #modulesCarouselContainer:hover .modules-nav {
  opacity: 1;
}

#featuredbrands-module #modulesPrev {
  left: 8px;
}

#featuredbrands-module #modulesNext {
  right: 8px;
}

@media (max-width: 480px) {
  #featuredbrands-module #modulesCarouselWrapper {
    max-width: 100%;
    padding: 20px;
  }

  #featuredbrands-module #modulesTrack .carousel-card {
    padding: 0 10px;
  }

  #featuredbrands-module #modulesTrack .carousel-card img {
    width: 100%;
    height: auto;
    object-fit: contain;
    max-width: 100%;
  }

  #featuredbrands-module #modulesCarouselContainer .modules-nav {
    display: none !important;
  }

  #featuredbrands-module #modulesDynamicTitle {
    font-size: 20px;
    line-height: 1.2;
  }
}


/* ============================================
   MODULE 10: OTHER WAYS TO SUPPORT US
   Container: .other-ways-wrapper
   NOTE: Add class="other-ways-wrapper" to the
   wrapper div in your HTML.
   ============================================ */
.other-ways-wrapper {
  background: #fff;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  margin-top: 30px;
  margin-bottom: 30px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.other-ways-wrapper .widget-title {
  font-size: clamp(1.2rem, 4.5vw, 1.5rem);
  font-weight: 700;
  text-align: center;
  margin: 0 0 12px 0;
  line-height: 1.2;
  color: #333;
}


/* ============================================
   MODULE 11: SUPPORT US ON SOCIAL MEDIA
   Container: .social-wrapper
   ============================================ */
.social-wrapper {
  background: #fff;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  margin-top: 30px;
  margin-bottom: 30px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.social-wrapper .widget-title {
  font-size: clamp(1.2rem, 4.5vw, 1.5rem);
  font-weight: 700;
  text-align: center;
  margin: 0 0 12px 0;
  line-height: 1.2;
  color: #333;
  white-space: nowrap;
}


/* ============================================
   MODULE 12: JOIN OUR COMMUNITY
   Container: .community-wrapper
   NOTE: Add class="community-wrapper" to the
   wrapper div in your HTML.
   ============================================ */
.community-wrapper {
  background: #fff;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  margin-top: 30px;
  margin-bottom: 30px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.community-wrapper .widget-title {
  font-size: clamp(1.2rem, 4.5vw, 1.5rem); 
  font-weight: 700;
  text-align: center;
  margin: 0 0 12px 0;
  line-height: 1.2;
  color: #333;
}


/* ============================================
   MODULE 13: IMPACT MARKETPLACE
   Container: #impactCarouselWrapper
   ============================================ */
#impactCarouselWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 480px;
  margin: 30px auto 0;
  padding: 20px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 10;
}

#impactCarouselWrapper .impact-org-logo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#impactCarouselWrapper .impact-org-logo:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

#impactCarouselWrapper .impact-dropdown-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0;
  justify-content: center;
}

#impactDropdownBtn {
  background: linear-gradient(135deg, #ff7b00, #ff0095);
  color: white;
  padding: 12px 24px;
  border-radius: 28px;
  font-weight: 700;
  font-size: 16px;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  z-index: 20;
}

#impactDropdownBtn:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

#impactDropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 250px;
  z-index: 9999;
}

#impactDropdown.active {
  display: block;
}

#impactDropdown div {
  padding: 10px 0;
  cursor: pointer;
  font-weight: 600;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

#impactDropdown div:hover {
  background: rgba(255, 123, 0, 0.1);
}

#impactSelectedName {
  margin: 6px 0 2px 0;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  font-size: 20px;
  line-height: 1.1;
  color: #333;
}

#impactCarouselContainer {
  position: relative;
  width: 100%;
  margin-bottom: 15px;
  overflow: hidden;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  touch-action: pan-y;
}

#impactCarouselContainer .carousel-card {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

#impactCarouselContainer .carousel-card img {
  width: 100%;
  max-width: 480px;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
  border: 4px solid #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#impactCarouselContainer .carousel-card:hover img {
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

#impactBrandInfo {
  text-align: center;
}

#impactBrandName {
  font-weight: 700;
  font-size: 16px;
}

#impactBrandText {
  font-size: 14px;
  line-height: 1.4;
  margin-top: 6px;
}

#impactCarouselContainer .impact-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border: none;
  font-size: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

#impactCarouselContainer:hover .impact-nav {
  opacity: 1;
}

#impactPrev {
  left: 8px;
}

#impactNext {
  right: 8px;
}

.impact-slide-left {
  animation: impactSlideLeft 0.35s ease;
}

.impact-slide-right {
  animation: impactSlideRight 0.35s ease;
}

@keyframes impactSlideLeft {
  from {
    transform: translateX(40px);
    opacity: 0.6;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes impactSlideRight {
  from {
    transform: translateX(-40px);
    opacity: 0.6;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.impact-dropdown-wrapper + .disclaimer {
  margin-top: 0;
}

@media (max-width: 480px) {
  #impactCarouselWrapper {
    max-width: 100%;
    padding: 20px;
  }

  #impactCarouselContainer .carousel-card img {
    max-height: 180px;
  }

  #impactCarouselContainer .impact-nav {
    display: none !important;
  }
}


/* ============================================
   MODULE 14: ETHICAL MARKETPLACE
   Container: #ethicalCarouselWrapper
   ============================================ */
#ethicalCarouselWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 480px;
  margin: 30px auto 0;
  padding: 20px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 10;
}

#ethicalCarouselWrapper .ethical-org-logo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#ethicalCarouselWrapper .ethical-org-logo:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

#ethicalCarouselWrapper .ethical-dropdown-wrapper {
  position: relative;
  display: flex;
  margin-bottom: 20px;
  justify-content: center;
}

#ethicalDropdownBtn {
  background: linear-gradient(135deg, #ff7b00, #ff0095);
  color: white;
  padding: 12px 24px;
  border-radius: 28px;
  font-weight: 700;
  font-size: 16px;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  z-index: 20;
}

#ethicalDropdownBtn:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

#ethicalDropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 220px;
  z-index: 9999;
}

#ethicalDropdown.active {
  display: block;
}

#ethicalDropdown div {
  padding: 10px 15px;
  cursor: pointer;
  font-weight: 600;
  text-align: center;
}

#ethicalDropdown div:hover {
  background: rgba(255, 123, 0, 0.1);
}

#ethicalCarouselContainer {
  position: relative;
  width: 100%;
  margin-bottom: 15px;
  overflow: hidden;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  touch-action: pan-y;
}

#ethicalCarouselContainer .carousel-card {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

#ethicalCarouselContainer .carousel-card img {
  width: 100%;
  max-width: 480px;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
  border: 4px solid #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#ethicalCarouselContainer .carousel-card:hover img {
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

#ethicalBrandInfo {
  text-align: center;
}

#ethicalBrandName {
  font-weight: 700;
  font-size: 16px;
}

#ethicalBrandText {
  font-size: 14px;
  line-height: 1.4;
  margin-top: 6px;
}

#ethicalCarouselContainer .ethical-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border: none;
  font-size: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

#ethicalCarouselContainer:hover .ethical-nav {
  opacity: 1;
}

#ethicalPrev {
  left: 8px;
}

#ethicalNext {
  right: 8px;
}

.ethical-slide-left {
  animation: ethicalSlideLeft 0.35s ease;
}

.ethical-slide-right {
  animation: ethicalSlideRight 0.35s ease;
}

@keyframes ethicalSlideLeft {
  from {
    transform: translateX(40px);
    opacity: 0.6;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes ethicalSlideRight {
  from {
    transform: translateX(-40px);
    opacity: 0.6;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@media (max-width: 480px) {
  #ethicalCarouselWrapper {
    max-width: 100%;
    padding: 20px;
  }

  #ethicalCarouselContainer .carousel-card img {
    max-height: 180px;
  }

  #ethicalCarouselContainer .ethical-nav {
    display: none !important;
  }
}


/* ============================================
   MODULE 15: LEGACY / INACTIVE MODULES
   Kept for backward compatibility.
   Each is scoped to its own container.
   ============================================ */

/* --- Amazon Event Widget (legacy class) --- */
.amazon-widget {
  background: #fff;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  margin-top: 30px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.amazon-widget img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

.amazon-widget-text {
  font-size: 14px;
  margin-top: 0;
}

.amazon-widget-event {
  font-size: 16px;
  font-weight: 700;
  margin-top: 0;
}

/* --- Supporter Offer Widget (legacy) --- */
.supporter-widget {
  background: #fff;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  margin-top: 30px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.supporter-widget img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

.supporter-widget-text {
  font-size: 14px;
  margin-top: 0;
}

.supporter-widget-event {
  font-size: 16px;
  font-weight: 700;
  margin-top: 0;
}

/* --- Petfinder Wrapper (legacy) --- */
.petfinder-wrapper {
  background: #fff;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  margin-top: 30px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Brand Partner Wrapper (legacy) --- */
.brand-partner-wrapper {
  background: #fff;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  margin-top: 30px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.brand-partner-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

.brand-partner-text {
  font-size: 14px;
  margin-top: 0;
}

.brand-partner-name {
  font-size: 16px;
  font-weight: 700;
  margin-top: 0;
}

/* --- GoFundMe Wrapper (legacy) --- */
.gfm-wrapper {
  border-radius: 16px;
  overflow: hidden;
  border: none;
}

.gfm-wrapper iframe {
  border: none !important;
  width: 100%;
}

/* --- Supporter Activity Wrapper (legacy) --- */
.supporter-activity-wrapper {
  background: #fff;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  margin-top: 30px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.supporter-activity-wrapper .activity-feed {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.supporter-activity-wrapper .activity-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 10px;
  border-radius: 12px;
  background-color: #f9f9f9;
  opacity: 0;
  transition: transform 1s ease, opacity 1s ease;
  width: 100%;
  box-sizing: border-box;
}

.supporter-activity-wrapper .activity-item .icon {
  font-size: 2rem;
  margin-bottom: 6px;
}

.supporter-activity-wrapper .activity-item .activity-text {
  font-size: 0.95rem;
  margin-bottom: 4px;
  line-height: 1.3;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-align: center;
}

.supporter-activity-wrapper .activity-item .amount {
  font-weight: bold;
  color: #000;
  margin-top: 0;
}

@media (max-width: 480px) {
  .supporter-activity-wrapper {
    max-width: 100%;
    padding: 20px;
  }

  .supporter-activity-wrapper .activity-feed {
    width: 100%;
  }

  .supporter-activity-wrapper .activity-item {
    padding: 8px;
  }

  .supporter-activity-wrapper .activity-item .activity-text {
    font-size: 0.9rem;
  }
  .cause-selector .cause-pills{
        flex-wrap: wrap;
  }

 
   
}

/* ============================================
   MODULE 16: PRODUCT SPOTLIGHT
   Mount:     #productspotlight-module
   Generated: #modulesCarouselWrapper (inside)
   ============================================ */
#productspotlight-module #modulesCarouselWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 480px;
  margin: 30px auto 0;
  padding: 20px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 10;
}

#productspotlight-module .widget-title {
  font-size: clamp(1.2rem, 4.5vw, 1.5rem);
  font-weight: 700;
  text-align: center;
  margin: 0 0 12px 0;
  line-height: 1.2;
  color: #333;
}

#productspotlight-module #modulesDynamicTitle {
  font-weight: 600;
  margin: 0 0 12px 0;
  text-align: center;
  font-size: 18px;
}

#productspotlight-module #modulesDynamicBranddesc {
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 14px;
}

#productspotlight-module #modulesDynamicDisclosure {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 14px;
}

#productspotlight-module #modulesCarouselContainer {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  touch-action: pan-y;
  margin-bottom: 15px;
}

#productspotlight-module #modulesTrack {
  display: flex;
  width: 100%;
  transition: transform 0.4s ease;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

#productspotlight-module #modulesTrack .carousel-card {
  min-width: 100%;
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 0 16px;
  text-decoration: none;
}

#productspotlight-module #modulesTrack .carousel-card img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  border: 4px solid #fff;
  background: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#productspotlight-module #modulesTrack .carousel-card:hover img {
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

#productspotlight-module #modulesCarouselContainer .modules-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border: none;
  font-size: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

#productspotlight-module #modulesCarouselContainer:hover .modules-nav {
  opacity: 1;
}

#productspotlight-module #modulesPrev {
  left: 8px;
}

#productspotlight-module #modulesNext {
  right: 8px;
}

@media (max-width: 480px) {
  #productspotlight-module #modulesCarouselWrapper {
    max-width: 100%;
    padding: 20px;
  }

  #productspotlight-module #modulesTrack .carousel-card {
    padding: 0 10px;
  }

  #productspotlight-module #modulesTrack .carousel-card img {
    width: 100%;
    height: auto;
    object-fit: contain;
    max-width: 100%;
  }

  #productspotlight-module #modulesCarouselContainer .modules-nav {
    display: none !important;
  }

  #productspotlight-module #modulesDynamicTitle {
    font-size: 20px;
    line-height: 1.2;
  }
}



/* ============================================
   MODULE 17: ADOPTABLES
   Container: .adoptables-wrapper
   ============================================ */
.adoptables-wrapper {
  background: #fff;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  margin-top: 30px;
  margin-bottom: 30px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.adoptables-wrapper .widget-title {
  font-size: clamp(1.2rem, 4.5vw, 1.5rem);
  font-weight: 700;
  text-align: center;
  margin: 0 0 12px 0;
  line-height: 1.2;
  color: #333;
}

.adoptables-wrapper .widget-subtitle { 
  color: #000;    
  font-weight: 600;
  margin: 0 0 12px 0;
  text-align: center;
  font-size: 18px;
}

.adoptables-widget-box {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 320px;
  overflow: hidden;
}

/* Petfinder scroller */
.adoptables-widget-box pet-scroller {
  width: 100%;
  max-width: 100%;
}

/* Adoptapet iframe */
.adoptables-widget-box .adoptapet-frame {
  width: 100%;
  max-width: 450px;
  height: 750px;
  border: none;
  border-radius: 8px;
}

@media (max-width: 480px) {
  .adoptables-widget-box .adoptapet-frame {
    height: 380px;
  }
}