/* --- Keep all original CSS exactly --- */
    body { margin:0; font-family:Poppins,sans-serif; background: linear-gradient(135deg,#ff7b00,#ff0095); min-height:100vh; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); display:flex; justify-content:center; align-items:center; position:relative; }
    body::after { content:""; position:fixed; inset:0; background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch"/></filter><rect width="120" height="120" filter="url(%23n)" opacity="0.035"/></svg>'); pointer-events:none; }
    .container-wrapper { width:100%; display:flex; justify-content:center; padding:60px 0; box-sizing:border-box; }
    .container { max-width:600px; width:90%; background:#fff; border-radius:28px; padding:40px; box-shadow:0 20px 40px rgba(0,0,0,0.25); text-align:center; position:relative; }
    .top-logo { width:550px; margin-bottom:20px; display:block; margin-left:auto; margin-right:auto; }
    .org-logo-container { width:140px; margin:10px auto; display:flex; flex-direction:column; align-items:center; justify-content:center; }
    .org-logo-container img { width:120px; height:120px; border-radius:50%; object-fit:cover; display:block; transition: transform 0.2s ease; }
    .org-logo-container img:hover { transform: scale(1.05); box-shadow:0 4px 12px rgba(0,0,0,0.2); }
    h1 { margin-bottom:0px; font-size:24px; text-transform:uppercase; }
    .disclaimer { font-size:14px;  margin-top: 0;      /* remove default space above */margin-bottom:20px; }
    .bio { font-size:14px; margin-bottom:20px; }

    /* --- Use the same wrapper as Support & Shop --- */
    .support-shop-component-wrapper.howto-container {
    background:#fff;
    border-radius:20px;
    padding:20px 20px 20px 20px; /* same as S&S */
    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; /* same as S&S */
    margin-left:auto;
    margin-right:auto;
    }

    /* Slides container */
    .howto-slides {
    position: relative;
    width: 100%;
    height: 200px; /* adjust height */
    overflow: hidden;
    }

    /* Individual slides */
    .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;
    }

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

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

    /* Slide images and text */
    .howto-icon img {
    width: 110px;
    height: 110px;
    object-fit: contain;
    }

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

    /* Dots outside the container */
    .howto-dots {
    display:flex;
    justify-content:center;
    gap:8px;
    margin:15px auto 10px;
    max-width:480px; /* aligns horizontally with container */
    }

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

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

  @media (max-width:480px) {
  .howto-slides {
    height: auto;          /* allows container to grow with content */
    min-height: 200px;     /* ensures a reasonable default */
    padding-bottom: 10px;  /* extra space at bottom */
  }
  .howto-icon img {
    width: 90px;
    height: 90px;
  }
  .howto-text {
    font-size: 14px;
    padding: 0 10px;
  }
  .howto-dots {
    max-width: 100%;
  }
  .support-shop-component-wrapper.howto-wrapper {
    padding: 15px 20px 20px 20px; /* extra spacing for mobile */
  }
}
    .howto-slides {
  touch-action: pan-y;
}

.widget-title {
  font-size: 1.5rem;        /* choose appropriate size */
  font-weight: 700;         /* bold */
  text-align: center;       /* center-aligned text */
  margin: 0 0 12px 0;       /* 0 top, 12px bottom spacing */
  line-height: 1.2;         /* adjust as needed */
  color: #333;              /* optional text color */
}

    .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:18px; transition: transform 0.2s ease, box-shadow 0.2s ease; }
    .button:hover { transform: scale(1.05); box-shadow:0 8px 20px rgba(0,0,0,0.3); }
    .prime-link { display:block; margin-top:5px; margin-bottom:8px; font-size:14px; color:#444; text-decoration:none; }
    .prime-link:hover {
      text-decoration: underline;
    }
    .footer { margin-top:30px; font-size:12px; color:#555; text-align:center; white-space:nowrap; }
    .footer img { width:100px; margin-bottom:6px; }
    .support-shop-component-wrapper { background:#fff; border-radius:20px; padding:20px 20px 20px 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; }
    
    .button {
  white-space: nowrap;
  font-size: clamp(14px, 4vw, 18px);
}

@media (max-width: 480px) {
  .button {
    padding: 14px 20px;
  }
}

.social-wrapper .widget-title {
  white-space: nowrap;
  font-size: clamp(1.2rem, 4.5vw, 1.5rem);
}

/* ===============================
   Amazon Shopping Event Widget
================================ */ 
 
.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: 0px;
}

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

/* ===============================
   Supporter Offer Widget
================================ */

.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: 0px;
}

.supporter-widget-event {
  font-size: 16px;
  font-weight: 700;
  margin-top: 0px;
}
 
/* ===============================
   Brand Partnerships
================================ */

.brand-partner-wrapper {
  background:#fff;
    border-radius:20px;
    padding:20px 20px 20px 20px; /* same as S&S */
    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; /* same as S&S */
    margin-left:auto;
    margin-right:auto;
}

.brand-partner-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;  /* 20 - 8 padding visual correction */
}

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

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

.gfm-wrapper {
  border-radius: 16px;
  overflow: hidden;
  border: none;
}

.gfm-wrapper iframe {
  border: none !important;
  width: 100%;
}
 
    .support-shop-logo-container { width:auto; height:auto; margin:10px auto; display:flex; align-items:center; justify-content:center; }
    .support-shop-logo-container img { width:140px; height:auto; object-fit:contain; display:block; transition: transform 0.2s ease; }
    .support-shop-logo-container img:hover { transform: scale(1.05); }
    .widget-selector { display:flex; justify-content:center; margin-bottom:10px; position:relative; }
    .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; }
    .widget-selector button:hover { transform: scale(1.05); box-shadow:0 8px 20px rgba(0,0,0,0.3); }
    .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%); }
    .dropdown.active { display:block; }
    .dropdown div { padding:10px 15px; cursor:pointer; text-align:center; font-weight:600; }
    .dropdown div:hover { background:rgba(255,123,0,0.1); }
    .widget-disclosure { font-size:14px; margin:10px 0 15px 0; max-width:80%; margin-left:auto; margin-right:auto; white-space:pre-line; }
    .carousel-wrapper { overflow-x:auto; overflow-y:hidden; padding-bottom:25px; scroll-behavior: smooth; display:flex; justify-content:center; }
    .carousel-wrapper::-webkit-scrollbar { height:8px; }
    .carousel-wrapper::-webkit-scrollbar-track { background:transparent; }
    .carousel-wrapper::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.2); border-radius:4px; }
    .carousel-container { display:flex; gap:15px; justify-content:flex-start; width:auto; max-width:calc(140px * 3 + 30px); }
    .carousel-card { display:flex; flex-direction:column; align-items:center; text-decoration:none; flex:0 0 auto; }
    .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; }
    .carousel-card img:hover { transform: scale(1.05); box-shadow:0 8px 20px rgba(0,0,0,0.15); }
    .card-title { margin-top:8px; font-size:12px; text-align:center; text-transform:uppercase; color:#444; word-wrap: break-word; max-width:140px; }

/* ===============================
   Supporter Impact Widget – Final Version
================================ */

.support-shop-component-wrapper.supporter-impact-wrapper {
   background:#fff;
    border-radius:20px;
    padding:20px 20px 20px 20px; /* same as S&S */
    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; /* same as S&S */
    margin-left:auto;
    margin-right:auto;
    }

/* Titles */
.current-total-label,
.next-goal-label {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 0;            /* remove extra gap below label */
}

/* Amounts */
.current-total-value,
.next-goal-amount {
  font-size: 1.25rem;
  font-weight: bold;           /* bold numbers */
  margin-top: 2px;             /* small space from label */
  margin-bottom: 10px;         /* space before next element (progress bar) */
}

/* Goal text (under progress bar) */
.next-goal-label-full {
  display: block;
  margin-bottom: 4px;
  font-size: 0.95rem;
  color: #666;
}

/* Progress bar wrapper */
.goal-bar-wrapper {
  width: 100%;
  margin-top: 4px;
}

/* Background track */
.goal-bar-background {
  width: 100%;
  height: 18px;
  background: #f0f0f0;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 4px;
}

/* Progress fill */
.goal-bar-progress {
  width: 0%;
  height: 100%;
  background: linear-gradient(135deg,#ff7b00,#ff0095); /* pink/orange gradient */
  border-radius: 8px 0 0 8px;
  transition: width 2s ease-in-out; /* smooth fill animation */
}

/* Hide the under-bar goal values completely */
.goal-bar-values {
  display: none !important;
}

/* Goal bar values underneath progress bar */
.goal-bar-values {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-weight: bold;
  font-size: 0.9rem;
  margin-top: -4px; /* move closer to progress bar */
}

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

/* Mobile adjustments */
@media (max-width: 480px) {
  .support-shop-component-wrapper.supporter-impact-wrapper {
    padding: 20px 20px 20px 20px;              /* slightly tighter padding */
  }
  .current-total-value,
  .next-goal-amount,
  .goal-left,
  .goal-right {
    font-size: 1.1rem;           /* scale down on mobile */
  }
  .goal-bar-background {
    height: 12px;                /* thinner bar on mobile */
  }
  .next-goal-label-full {
    font-size: 1rem;
  }
}
/* ===============================
   End of Supporter Impact Widget
================================ */


/* ===============================
   Recent Activity Widget
================================ */

.supporter-activity-wrapper {
  background:#fff;
    border-radius:20px;
    padding:20px 20px 20px 20px; /* same as S&S */
    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; /* same as S&S */
    margin-left:auto;
    margin-right:auto;
    }

.activity-feed {
  position: relative;
  width: 100%;
  overflow: hidden;            /* keeps sliding cards contained */
}

.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;
}

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

.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;
}

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

/* Mobile adjustments – match carousel behavior */
@media (max-width:480px) {
  .supporter-activity-wrapper {
    max-width: 100%;
    padding: 20px 20px 20px 20px; /* match carousel mobile padding */
  }

  .activity-feed {
    width: 100%;
  }

  .activity-item {
    padding: 8px;
  }

  .activity-item .activity-text {
    font-size: 0.9rem;
  }
}


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

.org-logo-container { width:140px; margin:10px auto; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.org-logo-container img { width:120px; height:120px; border-radius:50%; object-fit:cover; display:block; transition: transform 0.2s ease; }
.org-logo-container img:hover { transform: scale(1.05); box-shadow:0 4px 12px rgba(0,0,0,0.2); }

#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);
}

/* Dropdown button */
#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);
}

/* Dropdown panel – now opens below button */
#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;
}

.impact-dropdown-wrapper {
  position: relative;
  display: flex;
  margin-bottom:0px;
  justify-content: center;
}

#impactDropdown.active {
  display: block;
}

#impactDropdown div {
  padding: 10px 0;       /* vertical padding only */
  cursor: pointer;
  font-weight: 600;
  text-align: center;    /* ensures text is fully centered */
  width: 100%;           /* spans full dropdown width */
  box-sizing: border-box; /* prevents padding from breaking centering */
}

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

/* Carousel container */
#impactCarouselContainer {
  position: relative;
  width: 100%;
  margin-bottom: 15px;
  overflow: hidden;
  border-radius: 12px;
  display: flex;
  justify-content: center;
}

/* Single brand card visible at a time */
#impactCarouselContainer .carousel-card {
  flex: 0 0 100%; /* full width of container */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}

/* Brand image – match Featured Brand section */
#impactCarouselContainer .carousel-card img {
  width: 100%;     /* full width */
  max-width: 480px;
  height: auto;    /* preserve aspect ratio */
  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);
}

/* Brand Name & Description */
#impactBrandInfo {
  text-align: center;
}

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

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

/* Nav arrows */
#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; }

@media (max-width:480px){
  #impactCarouselWrapper { max-width: 100%; padding: 20px 20px 20px 20px; }
  #impactCarouselContainer .carousel-card img { max-height: 180px; }
}

/* Impact dropdown wrapper: stack elements */
.impact-dropdown-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Impact name: small space above and below */
#impactSelectedName {
  margin: 6px 0 2px 0;   /* 6px above (space from button), 2px below (space to text) */
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  font-size: 20px;
  line-height: 1.1;
  color: #333;
}

/* Reduce extra spacing below wrapper so disclaimer stays close */
.impact-dropdown-wrapper + .disclaimer {
  margin-top: 0;   /* remove extra gap */
}
/* ===============================
   Impact Marketplace Slide Animation
================================ */

#impactCarouselContainer .carousel-card {
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.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;
  }
}

/* Prevent swipe conflicts with vertical scroll */
#impactCarouselContainer {
  touch-action: pan-y;
}

/* Hide arrows on mobile (swipe replaces them) */
@media (max-width:480px){
  #impactCarouselContainer .impact-nav{
    display:none;
  }
}

@media (max-width:480px){
  #impactCarouselContainer .impact-nav {
    display: none !important;  /* hide nav arrows on mobile */
  }
}
    


/* ===============================
   Ethical Marketplace Carousel
================================ */
#ethicalCarouselWrapper {
  background:#fff;
    border-radius:20px;
    padding:20px 20px 20px 20px; /* same as S&S */
    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; /* same as S&S */
    margin-left:auto;
    margin-right:auto;
    }

.org-logo-container { width:140px; margin:10px auto; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.org-logo-container img { width:120px; height:120px; border-radius:50%; object-fit:cover; display:block; transition: transform 0.2s ease; }
.org-logo-container img:hover { transform: scale(1.05); box-shadow:0 4px 12px rgba(0,0,0,0.2); }

#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);
}

/* Dropdown button */
#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);
}

/* Dropdown panel – now opens below button */
#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;
}

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

#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);
}

/* Carousel container */
#ethicalCarouselContainer {
  position: relative;
  width: 100%;
  margin-bottom: 15px;
  overflow: hidden;
  border-radius: 12px;
  display: flex;
  justify-content: center;
}

/* Single brand card visible at a time */
#ethicalCarouselContainer .carousel-card {
  flex: 0 0 100%; /* full width of container */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}

/* Brand image – match Featured Brand section */
#ethicalCarouselContainer .carousel-card img {
  width: 100%;     /* full width */
  max-width: 480px;
  height: auto;    /* preserve aspect ratio */
  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);
}

/* Brand Name & Description */
#ethicalBrandInfo {
  text-align: center;
}

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

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

/* Nav arrows */
#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; }

@media (max-width:480px){
  #ethicalCarouselWrapper { max-width: 100%; padding: 20px 20px 20px 20px; }
  #ethicalCarouselContainer .carousel-card img { max-height: 180px; }
}

/* ===============================
   Ethical Marketplace Slide Animation
================================ */

#ethicalCarouselContainer .carousel-card {
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.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;
  }
}

/* Prevent swipe conflicts with vertical scroll */
#ethicalCarouselContainer {
  touch-action: pan-y;
}

/* Hide arrows on mobile (swipe replaces them) */
@media (max-width:480px){
  #ethicalCarouselContainer .ethical-nav{
    display:none;
  }
}


    /* ===============================
   Cause Selector – Polished & Consistent
================================ */

.cause-selector {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px auto 20px;
}

/* Main dropdown button */
.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-toggle:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

/* Dropdown panel */
.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-panel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Pills – match main CTA button */
.cause-pills {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 10px;
}

/* Pills now outside the dropdown, single neat row */
.cause-pills {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 6px 0 12px 0;
  flex-wrap: nowrap;  /* force single line */
}

.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-pills button:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

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



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

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

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

/* Active client highlight */
.cause-list li.active {
  background: rgba(0,0,0,0.1);
  font-weight: 700;
  cursor: default;
}

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

body {
  opacity: 0;
  transition: opacity 0.4s ease;
}

body.page-visible {
  opacity: 1;
}

body.page-fade-out {
  opacity: 0;
}
/* ===============================
   Social buttons
================================ */

.social-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-bottom: 0;   /* remove extra space below */
  padding-bottom: 0;  /* remove internal padding if any */
}

/* Base circular button */
.social-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;
  position: relative;
}

/* Hover matches existing CTA behaviour */
.social-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
}

/* Icon styling (SVG via mask for crisp scaling) */
.social-btn::before {
  content: "";
  width: 26px;
  height: 26px;
  background-color: #fff;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

/* Individual platform icons */
.social-btn.facebook::before {
  mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/facebook.svg");
}

.social-btn.instagram::before {
  mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/instagram.svg");
}

.social-btn.x::before {
  mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/x.svg");
}

.social-btn.tiktok::before {
  mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/tiktok.svg");
}

.social-btn.youtube::before {
  mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/youtube.svg");
}

/* Mobile sizing tweak */
@media (max-width: 480px) {
  .social-btn {
    width: 48px;
    height: 48px;
  }
  .social-btn::before {
    width: 22px;
    height: 22px;
  }
}

.social-btn.paypal::before {
  mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/paypal.svg");
}

.social-btn.square::before {
  mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/square.svg");
}

.social-btn.venmo::before {
  mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/venmo.svg");
}

.social-btn.cashapp::before {
  mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/cashapp.svg");
}

.social-btn.gofundme::before {
  mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/gofundme.svg");
}

.social-btn.justgiving::before {
  mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/justgiving.svg");
}

.social-btn.zelle::before {
  mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/zelle.svg");
}

.social-btn.patreon::before {
  mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/patreon.svg");
}

.social-btn.stripe::before {
  mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/stripe.svg");
}

.social-btn.githubsponsors::before {
  mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/githubsponsors.svg");
}

/* ===============================
   QUICK LINKS WIDGET
================================ */

/* ===============================
   QUICK LINKS WIDGET
================================ */

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

/* MATCHES .social-btn exactly */
.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;
}

/* Hover = identical */
.quick-link-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
}

/* ICON */
.quick-link-btn img {
  width: 26px;
  height: 26px;
  display: block;

  /* Force white */
  filter: brightness(0) invert(1);
}

/* TEXT UNDER BUTTON */
.quick-link-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

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

/* Mobile */
@media (max-width: 480px) {
  .quick-link-btn {
    width: 48px;
    height: 48px;
  }

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

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


    @media screen and (max-width: 480px) {
      body { background:#fff; padding:0; align-items:stretch; }
      .container-wrapper { padding:0; margin:0; }
      .container { padding:20px; border-radius:0; box-shadow:none; min-height:100vh; width:100%; }
      .top-logo { width:250px; }
      .org-logo-container { width:120px; height:120px; }
      .org-logo-container img { width:100%; height:100%; }
      .support-shop-logo-container { width:120px; }
      .support-shop-logo-container img { width:100%; }
      .carousel-card img { width:100px; height:100px; }
      .card-title { font-size:10px; max-width:100px; }
      .carousel-container { max-width:calc(100px * 3 + 30px); }
      .widget-selector button { font-size:14px; padding:10px 20px; min-width:150px; }
      .widget-disclosure { font-size:12px; }
      .footer { white-space:normal; }
      .footer strong { white-space:nowrap; }