#fw-section-custom-html-b6caa627-545c-42f4-b3e1-2713bf8f752c {

/* =====================================================
   FAQ PAGE - FIXED CSS
   
   Works with .taped class + adds specific targeting
===================================================== */

/* Container */
.beans-faq-wrapper {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

/* Hero Section */
.beans-hero-section {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  margin-bottom: 50px;
  flex-wrap: wrap;
}

.beans-hero-image {
  flex: 0 0 auto;
}

.beans-hero-image img {
  width: 200px;
  height: auto;
  display: block;
}

.beans-hero-text {
  flex: 1 1 300px;
}

.beans-hero-text h1 {
  font-family: var(--font-decorative);
  font-size: 2rem;
  margin-bottom: 15px;
  margin-top: 0;
}

.beans-hero-text p {
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 15px;
}

/* FAQ Panel Container */
.faq-panel {
  position: relative;
  margin-bottom: 40px;
  margin-top: 50px;
  width: var(--panel-width);
  margin-left: var(--panel-align);
  margin-right: auto;
}

.faq-panel:first-of-type {
  margin-top: 20px;
}

/* Alternating alignment for playful scrapbook look */
.faq-panel:nth-child(odd) {
  --panel-align: 0;
}

.faq-panel:nth-child(even) {
  --panel-align: auto;
  margin-right: 0;
}

/* Varied panel widths */
.faq-panel:nth-child(1) { --panel-width: 85%; }
.faq-panel:nth-child(2) { --panel-width: 90%; }
.faq-panel:nth-child(3) { --panel-width: 82%; }
.faq-panel:nth-child(4) { --panel-width: 88%; }
.faq-panel:nth-child(5) { --panel-width: 86%; }
.faq-panel:nth-child(6) { --panel-width: 84%; }
.faq-panel:nth-child(7) { --panel-width: 89%; }
.faq-panel:nth-child(8) { --panel-width: 87%; }
.faq-panel:nth-child(9) { --panel-width: 83%; }
.faq-panel:nth-child(10) { --panel-width: 91%; }

/* =====================================================
   ROTATION OVERRIDES FOR FAQ PANELS
   
   The .taped class uses nth-child on itself, but FAQ
   panels are nested, so we target .faq-panel instead
===================================================== */

.faq-panel:nth-child(1) .faq-panel-box {
  --tape-rotation: -8deg;
  --tile-rotation: 2deg;
  transform: rotate(2deg);
}

.faq-panel:nth-child(2) .faq-panel-box {
  --tape-rotation: 6deg;
  --tile-rotation: -1.5deg;
  transform: rotate(-1.5deg);
}

.faq-panel:nth-child(3) .faq-panel-box {
  --tape-rotation: -12deg;
  --tile-rotation: 1.8deg;
  transform: rotate(1.8deg);
}

.faq-panel:nth-child(4) .faq-panel-box {
  --tape-rotation: 10deg;
  --tile-rotation: -2.2deg;
  transform: rotate(-2.2deg);
}

.faq-panel:nth-child(5) .faq-panel-box {
  --tape-rotation: -5deg;
  --tile-rotation: 1.2deg;
  transform: rotate(1.2deg);
}

.faq-panel:nth-child(6) .faq-panel-box {
  --tape-rotation: 7deg;
  --tile-rotation: -1.8deg;
  transform: rotate(-1.8deg);
}

.faq-panel:nth-child(7) .faq-panel-box {
  --tape-rotation: -9deg;
  --tile-rotation: 1.5deg;
  transform: rotate(1.5deg);
}

.faq-panel:nth-child(8) .faq-panel-box {
  --tape-rotation: 4deg;
  --tile-rotation: -2deg;
  transform: rotate(-2deg);
}

.faq-panel:nth-child(9) .faq-panel-box {
  --tape-rotation: -11deg;
  --tile-rotation: 2.3deg;
  transform: rotate(2.3deg);
}

.faq-panel:nth-child(10) .faq-panel-box {
  --tape-rotation: 8deg;
  --tile-rotation: -1.3deg;
  transform: rotate(-1.3deg);
}

/* The actual panel box - uses .taped for base effects */
.faq-panel-box {
  /* Background colors for variety */
  background: var(--panel-bg);
  /* Border, shadow, tape all come from .taped class */
}

/* Question section */
.faq-question {
  padding: 30px 80px 20px 30px;
  border-bottom: 2px dashed rgba(70, 65, 63, 0.3);
  position: relative;
  font-family: var(--font-decorative);
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.3;
  margin: 0;
}

/* Answer section */
.faq-answer {
  padding: 20px 30px 30px;
  font-size: 1.25rem;
  line-height: 1.6;
}

.faq-answer p {
  margin: 0 0 15px 0;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

.faq-answer pre {
  background: transparent;
  border: none;
  padding: 0;
  margin: 15px 0;
  font-family: monospace;
  font-size: 1em;
  line-height: 1.5;
  white-space: pre-wrap;
}

.faq-answer a {
  color: var(--color-primary);
  text-decoration: underline;
  font-weight: bold;
}

.faq-answer a:hover {
  text-decoration: none;
}

/* Emoji in corner */
.faq-emoji {
  position: absolute;
  top: 22px;
  right: 20px;
  font-size: 2.5rem;
  line-height: 1;
  z-index: 2;
  flex-shrink: 0;
}

/* Panel background color variations */
.faq-panel:nth-child(1) .faq-panel-box { --panel-bg: #fff5c1; }
.faq-panel:nth-child(2) .faq-panel-box { --panel-bg: #ffe8b3; }
.faq-panel:nth-child(3) .faq-panel-box { --panel-bg: #fff9e1; }
.faq-panel:nth-child(4) .faq-panel-box { --panel-bg: #ffedc4; }
.faq-panel:nth-child(5) .faq-panel-box { --panel-bg: #fff7d0; }
.faq-panel:nth-child(6) .faq-panel-box { --panel-bg: #ffe6a8; }
.faq-panel:nth-child(7) .faq-panel-box { --panel-bg: #fff3c8; }
.faq-panel:nth-child(8) .faq-panel-box { --panel-bg: #ffeab8; }
.faq-panel:nth-child(9) .faq-panel-box { --panel-bg: #fff8d8; }
.faq-panel:nth-child(10) .faq-panel-box { --panel-bg: #ffecc0; }

/* Mobile Responsive */
@media (max-width: 640px) {
  .beans-faq-wrapper {
    padding: 15px;
  }
  
  .beans-hero-section {
    margin-bottom: 30px;
    justify-content: center;
    text-align: center;
  }
  
  .beans-hero-image img {
    width: 180px;
    margin: 0 auto;
  }
  
  .beans-hero-text h1 {
    font-size: 1.6rem;
  }
  
  .beans-hero-text p {
    font-size: 1.1rem;
  }
  
  .faq-panel {
    margin-bottom: 30px;
    margin-top: 40px;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  .faq-question {
    font-size: 1.3rem;
    padding: 25px 60px 15px 20px;
  }
  
  .faq-answer {
    padding: 15px 20px 20px;
    font-size: 1.1rem;
  }
  
  .faq-emoji {
    font-size: 2rem;
    top: 16px;
    right: 12px;
  }
}

@media (max-width: 400px) {
  .faq-question {
    font-size: 1.2rem;
    padding: 15px 50px 12px 18px;
  }
  
  .faq-emoji {
    font-size: 1.8rem;
    right: 12px;
  }
}
}
#fw-section-custom-html-78732435-c6f2-48c8-9faa-e8d0e9a4e491 {

.taped-panel {
  background: #ffe8b3;
}
}







#fw-section-custom-html-4e8fffad-9e03-461a-96c8-0efc6668c34e {

.activities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 50px;
  max-width: 1000px;
  margin: 40px auto 0;
  padding: 0 20px;
}
@media (max-width: 640px) {
  .activities-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 20px;
    padding: 0 10px;
  }
}
.activity-panel {
  display: flex;
  flex-direction: column;
  background: var(--panel-bg);
  padding: 0;
  text-align: center;
  text-decoration: none;
  color: var(--panel-text-color);
  overflow: hidden;
}
.activity-panel img {
  width: 100%;
  height: auto;
  display: block;
}
.activity-panel h2 {
  font-family: "Love Ya Like A Sister", cursive;
  font-size: 1.3rem;
  margin: 0;
  line-height: 1.2;
  padding: 15px 12px;
  color: var(--panel-text-color);
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 640px) {
  .activity-panel h2 {
    font-size: 1.1rem;
    padding: 12px 10px;
  }
}
/* Vibrant, varied background colors with white text */
.activity-panel:nth-child(1) { 
  --panel-bg: #FF6B9D;
  --panel-text-color: #fff;
}
.activity-panel:nth-child(2) { 
  --panel-bg: #4ECDC4;
  --panel-text-color: #fff;
}
.activity-panel:nth-child(3) { 
  --panel-bg: #FFB74D;
  --panel-text-color: #fff;
}
.activity-panel:nth-child(4) { 
  --panel-bg: #42A5F5; /* blue */
  --panel-text-color: #fff;
}
.activity-panel:nth-child(5) { 
  --panel-bg: #66BB6A; /* green */
  --panel-text-color: #fff;
}
.activity-panel:nth-child(6) { 
  --panel-bg: #E74C3C; /* red */
  --panel-text-color: #fff;
}
}
#fw-section-custom-html-e7dc767d-5c9c-44a8-b410-abb1f3485333 {

/* ========================================
   EVENTS PAGE
   ======================================== */

.events-outer {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 900px;
}

/* ========================================
   MARGIN PHOTOS - desktop
   ======================================== */

.margin-photo {
  position: absolute;
  background: #fff;
  padding: 10px;
  z-index: 0;
}

.margin-photo img {
  display: block;
  object-fit: cover;
  margin-bottom: 20px;
}

.margin-photo.photo-1 {
  left: -20px;
  top: 200px;
  width: 310px;
  transform: rotate(-3deg) !important;
}
.margin-photo.photo-1 img { width: 288px; height: 270px; }

.margin-photo.photo-2 {
  right: -20px;
  top: 160px;
  width: 300px;
  transform: rotate(2.5deg) !important;
}
.margin-photo.photo-2 img { width: 278px; height: 250px; }

.margin-photo.photo-3 {
  right: -40px;
  top: 580px;
  width: 320px;
  transform: rotate(-2deg) !important;
}
.margin-photo.photo-3 img { width: 298px; height: 260px; }

/* Photo 4 - bottom left, portrait crop since source is tall */
.margin-photo.photo-4 {
  left: -20px;
  top: 620px;
  width: 260px;
  transform: rotate(2deg) !important;
}
.margin-photo.photo-4 img { width: 238px; height: 300px; }

/* ========================================
   EVENTS CONTAINER
   ======================================== */

.events-container {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 20px 20px;
}

.events-year {
  font-family: var(--font-decorative);
  font-size: 3rem;
  text-align: center;
  margin-bottom: 50px;
  color: #46413f;
  font-style: italic;
  position: relative;
}

.events-year::after {
  content: '';
  display: block;
  width: 120px;
  height: 3px;
  background-color: var(--color-primary);
  margin: 15px auto 0;
}

/* ========================================
   EVENT CARDS
   ======================================== */

.event-card-link {
  text-decoration: none;
  display: block;
  margin-bottom: 30px;
}

.event-card-link .event-card {
  margin-bottom: 0;
}

.event-card {
  position: relative;
  border: var(--border-primary);
  box-shadow: var(--shadow-primary);
  overflow: hidden;
  transition: transform var(--transition-standard), border-color var(--transition-standard);
}

.event-card.confirmed {
  background: #fffdf5;
  padding: 20px 24px 18px;
  margin-bottom: 30px;
  box-shadow: var(--shadow-primary); 
}


.event-card.unconfirmed {
  background: #fafafa;
  padding: 14px 24px 14px;
  margin-bottom: 30px;
}

/* Automatic alternating rotations - no manual card classes needed */
.event-card:nth-child(odd)  { transform: rotate(-0.6deg); }
.event-card:nth-child(even) { transform: rotate(0.8deg); }

@media (hover: hover) and (pointer: fine) {
  .event-card-link:hover .event-card {
    transform: rotate(0deg) !important;
    border-color: var(--color-primary);
  }
}

/* ========================================
   EVENT CONTENT
   ======================================== */

.event-location {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0;
}

.event-card.confirmed .event-location {
  padding-top: 0px;
}

.location-pin {
  font-size: 2.2rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: -30px;
  margin-right: -6px;
}

.event-city {
  font-family: var(--font-decorative);
  font-size: var(--font-size-xlarge);
  color: #46413f;
  line-height: 1.2;
}

.event-date {
  font-size: 1.5rem;
  color: #8B4513;
  font-weight: bold;
  margin-top: 0;
}

.event-details {
  padding-left: 38px;
  margin-top: 4px;
}

.event-card.confirmed .event-details { padding-bottom: 16px; }
.event-card.unconfirmed .event-details { padding-bottom: 0; }

.event-link {
  font-size: 1.4rem;
  color: var(--color-primary);
  text-decoration: underline;
}

.event-status {
  font-size: 1.4rem;
  color: #999;
}

/* ========================================
   MOBILE PHOTOS
   ======================================== */

.mobile-photos { display: none; }

@media (max-width: 900px) {
  .events-outer > .margin-photo { display: none; }

  .mobile-photos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    padding: 50px 20px 20px;
  }

  .mobile-photos .margin-photo {
    display: block;
    position: relative;
    overflow: visible !important;
    width: 280px;
  }

  .mobile-photos .margin-photo img {
    width: 258px;
    height: 220px;
    margin-bottom: 16px;
  }
}

@media (max-width: 640px) {
  .events-outer { min-height: unset; }
  .events-container { padding: 0 15px 20px; }
  .events-year { font-size: 2.5rem; margin-bottom: 30px; }
  .event-card.confirmed,
  .event-card.unconfirmed { margin-bottom: 20px; }
  .event-city { font-size: 1.5rem; }
  .event-date { font-size: 1.3rem; }
  .event-link,
  .event-status { font-size: 1.2rem; }
}
}

#fw-section-collections-list-f6bfadf7-b79e-4b1a-8d78-f10ca90c4d11 {

/* Ensure grid layout is preserved and add spacing for tapes */
.grid {
  display: grid !important;
  row-gap: 50px !important;
  column-gap: 20px !important;
}

/* Force 2 columns on mobile */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr) !important;
    row-gap: 40px !important;
    column-gap: 15px !important;
  }
  
  /* Make sure grid columns take up proper space */
  .grid__column {
    max-width: 100% !important;
    flex-basis: auto !important;
  }
}

/* Add border and shadow to collection images */
.collections-list__item-image-wrapper {
  position: relative;
  overflow: visible !important;
  border: 3px solid #46413f;
  box-shadow: 6px 10px 0px rgba(217, 134, 70, 0.35);
  transition: transform 0.3s ease;
  /* Set transform origin to top center (where the tape is) */
  transform-origin: top center;
}

/* Hover effect - change border color AND straighten the panel */
.collections-list__item-image-wrapper:hover {
  border-color: var(--color-primary);
  transform: rotate(0deg) !important;
}

/* Tape decoration on collection tiles */
.collections-list__item-image-wrapper::before {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%) rotate(var(--tape-rotation, 0deg));
  width: 64px;
  height: 64px;
  background-image: url('https://www.exocomics.com/img/fw/tape.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1;
  pointer-events: none;
}

/* Responsive tape size on mobile/tablet */
@media (max-width: 1024px) {
  .collections-list__item-image-wrapper::before {
    top: -20px;
    width: 40px;
    height: 40px;
  }
}

/* Add MORE NOTICEABLE rotation variations to tiles and tapes */
.grid__column:nth-child(1) .collections-list__item-image-wrapper {
  --tape-rotation: -8deg;
  --tile-rotation: 2deg;
  transform: rotate(2deg);
}

.grid__column:nth-child(2) .collections-list__item-image-wrapper {
  --tape-rotation: 6deg;
  --tile-rotation: -1.5deg;
  transform: rotate(-1.5deg);
}

.grid__column:nth-child(3) .collections-list__item-image-wrapper {
  --tape-rotation: -12deg;
  --tile-rotation: 1.8deg;
  transform: rotate(1.8deg);
}

.grid__column:nth-child(4) .collections-list__item-image-wrapper {
  --tape-rotation: 10deg;
  --tile-rotation: -2.2deg;
  transform: rotate(-2.2deg);
}

.grid__column:nth-child(5) .collections-list__item-image-wrapper {
  --tape-rotation: -5deg;
  --tile-rotation: 1.2deg;
  transform: rotate(1.2deg);
}

.grid__column:nth-child(6) .collections-list__item-image-wrapper {
  --tape-rotation: 7deg;
  --tile-rotation: -1.8deg;
  transform: rotate(-1.8deg);
}

/* Cycle the pattern for more than 6 items */
.grid__column:nth-child(7) .collections-list__item-image-wrapper {
  --tape-rotation: -9deg;
  --tile-rotation: 1.5deg;
  transform: rotate(1.5deg);
}

.grid__column:nth-child(8) .collections-list__item-image-wrapper {
  --tape-rotation: 4deg;
  --tile-rotation: -2deg;
  transform: rotate(-2deg);
}

.grid__column:nth-child(9) .collections-list__item-image-wrapper {
  --tape-rotation: -11deg;
  --tile-rotation: 2.3deg;
  transform: rotate(2.3deg);
}

.grid__column:nth-child(10) .collections-list__item-image-wrapper {
  --tape-rotation: 8deg;
  --tile-rotation: -1.3deg;
  transform: rotate(-1.3deg);
}
}







#fw-section-custom-html-a3fde428-9300-41b1-ba90-32b0966f90b1 {
--color-primary: #c90d0d;
--color-primary-rgb: 201, 13, 13;
--color-background: #ffe55a;
--color-background-rgb: 255, 229, 90;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-product-image-background: #ffd763;
--color-background-brightness: 221;
background-color: var(--color-background);
color: var(--color-on-background);
--primary-btn-bg: #c90d0d;
--primary-btn-text: #ffffff;
--primary-btn-border-color: #000000;
--secondary-btn-bg: transparent;
--secondary-btn-text: #000000;
--secondary-btn-border-color: #000000;

}
#fw-section-custom-html-7dc51b31-da5e-46de-b03d-02bcff22cf13 {

.feature-section__image--dual {
  display: flex;
  gap: 1.25rem;
  align-items: center;
}

.dual-image {
  flex: 1;
  min-width: 0;
  display: block;
  transition: transform 0.15s ease;
}

.dual-image:hover {
  transform: scale(1.04);
}

.dual-image img {
  width: 100%;
  height: auto;
  display: block;
}

.compact-wrapper {
  padding-top: 40px;
}
}









#fw-section-newsletter-1724317962 {

/* Envelope card */
.newsletter__content {
  position: relative;
  overflow: visible !important;
  background: #ffffff;
  border: var(--border-primary);
  box-shadow: var(--shadow-primary);
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 40px 48px;
  transform: rotate(-1.2deg);
  transform-origin: center center;
  transition: transform 0.35s ease;
  z-index: 2;
}

/* Airmail stripe - top */
.newsletter__content::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 10px;
  background: repeating-linear-gradient(
    -45deg,
    #c0392b 0px,  #c0392b 20px,
    #fff    20px, #fff    40px,
    #2471a3 40px, #2471a3 60px,
    #fff    60px, #fff    80px
  );
  z-index: 1;
}

/* Airmail stripe - bottom */
.newsletter__content::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 10px;
  background: repeating-linear-gradient(
    -45deg,
    #c0392b 0px,  #c0392b 20px,
    #fff    20px, #fff    40px,
    #2471a3 40px, #2471a3 60px,
    #fff    60px, #fff    80px
  );
  z-index: 1;
}

/* Ensure the whole newsletter section stacks above the trail */
.newsletter,
.section-fw-section-newsletter,
[data-testid="main.single.section"]:has(.newsletter__content) {
  position: relative;
  z-index: 2;
}

@media (hover: hover) and (pointer: fine) {
  .newsletter__content:hover {
    transform: rotate(0deg);
  }
}

/* Heading — positioned for stamp, decorative font */
.newsletter__content .newsletter__header {
  position: relative;
  overflow: visible !important;
  padding-right: 80px !important;
}

.newsletter__content .newsletter__header,
.newsletter__content .newsletter__header * {
  font-family: var(--font-decorative) !important;
  text-align: left !important;
}

/* Stamp - on heading ::after, anchored to heading */
.newsletter__content .newsletter__header::after {
  content: "";
  position: absolute;
  top: -30px;
  right: -30px;
  width: 68px;
  height: 78px;
  background-image: url('https://www.exocomics.com/img/fw/stamp.png');
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
}

/* Subheading — left aligned */
.newsletter__content .newsletter__text {
  text-align: left !important;
}

/* Center the form elements within the envelope */
.newsletter__content .newsletter__form {
  display: flex !important;
  justify-content: center !important;
}

.newsletter__content .container--10 {
  width: 100% !important;
  max-width: 100% !important;
}

/* Mobile */
@media (max-width: 640px) {
  .newsletter__content {
    padding: 38px 20px 38px;
    transform: rotate(-0.7deg);
  }
  
  .newsletter__content .newsletter__header {
    padding-right: 0 !important;
  }
  
  .newsletter__content .newsletter__header::after {
    width: 52px;
    height: 60px;
    right: -10px;
top: -20px;
  }
}
}

#fw-section-app-instagram-241606 {

.instagram-feed__grid {
  background-color: var(--bg-yellow, #ffd763);
  border: var(--border-primary, 3px solid #46413f);
  box-shadow: var(--shadow-primary, 6px 10px 0px rgba(217, 134, 70, 0.35));
  padding: 16px;
  border-radius: 0;
}

/* Optional: Adjust grid spacing */
.instagram-feed__item {
  margin: 8px;
}

/* Optional: Ensure images fit nicely */
.instagram-feed__image {
  border-radius: 0;
}

}