/* FAQ Accordion Styles */

.faq-accordion {
  position: relative;
  z-index: 8
}

/* Two Column Layout - Text Left, FAQ Cards Right */
.learn-more-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* Ensure text fills width when stacked (mobile/tablet) */
.learn-more-text {
  width: 100%;
}

.learn-more-text .faq-heading {
  width: 100%;
}

.learn-more-text .faq-description {
  width: 100%;
}

.learn-more-faqs {
  width: 100%;
}

/* Tablet+: switch to 2-col layout. Previously this only kicked in at 1024+,
   which left iPad-portrait viewers staring at a thin single column. */
@media (min-width: 768px) {
  .learn-more-layout {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-xl);
  }

  .learn-more-text {
    flex: 0 0 40%;
    max-width: 40%;
    width: auto;
  }

  .learn-more-text .faq-heading {
    text-align: left;
  }

  .learn-more-faqs {
    flex: 1;
    width: auto;
  }
}

@media (min-width: 1024px) {
  .learn-more-layout {
    gap: var(--space-2xl);
  }
  
  /* Stacked Layout - Heading Above Blocks */
  .learn-more-layout--stacked {
    flex-direction: column;
  }
  
  .learn-more-layout--stacked .learn-more-text {
    flex: none;
    max-width: 100%;
    width: 100%;
  }
  
  .learn-more-layout--stacked .learn-more-faqs {
    flex: none;
    width: 100%;
  }
  
  /* Ensure stacked 2-column layout also has proper spacing */
  .learn-more-layout--stacked-2col .learn-more-text .faq-heading {
    text-align: left;
  }
}

/* FAQ Grid - Single Column for Right Side - Always Stacked */
.learn-more-faqs .faq-grid {
  display: grid;
  grid-template-columns: 1fr !important;
  gap: var(--space-md);
}

/* Stacked 2-column layout - 1 column on mobile */
.learn-more-layout--stacked-2col .learn-more-faqs .faq-grid {
  grid-template-columns: 1fr !important;
}

/* Tablet: stacked-2col gets its 2-column FAQ grid at 768+ so iPad-portrait
   users don't see a thin single column where desktop shows two. */
@media (min-width: 768px) and (max-width: 1023px) {
  .learn-more-layout--stacked-2col .learn-more-faqs .faq-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-md);
  }
}

@media (min-width: 1024px) {
  /* Ensure single column on desktop too */
  .learn-more-faqs .faq-grid {
    grid-template-columns: 1fr !important;
  }

  /* Stacked 2-column layout - 2 columns for blocks on desktop */
  .learn-more-layout--stacked-2col .learn-more-faqs .faq-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  /* Desktop Gap Variants - using attribute selector to match Liquid output */
  .learn-more-faqs .faq-grid[class*="lg:gap-xs"] { gap: var(--space-xs); }
  .learn-more-faqs .faq-grid[class*="lg:gap-sm"] { gap: var(--space-sm); }
  .learn-more-faqs .faq-grid[class*="lg:gap-md"] { gap: var(--space-md); }
  .learn-more-faqs .faq-grid[class*="lg:gap-lg"] { gap: var(--space-lg); }
  .learn-more-faqs .faq-grid[class*="lg:gap-xl"] { gap: var(--space-xl); }
  .learn-more-faqs .faq-grid[class*="lg:gap-2xl"] { gap: var(--space-2xl); }
  .learn-more-faqs .faq-grid[class*="lg:gap-3xl"] { gap: var(--space-3xl); }
  
  /* Desktop Margin Bottom Variants for Heading */
  .faq-heading[class*="lg:mb-xs"] { margin-bottom: var(--space-xs); }
  .faq-heading[class*="lg:mb-sm"] { margin-bottom: var(--space-sm); }
  .faq-heading[class*="lg:mb-md"] { margin-bottom: var(--space-md); }
  .faq-heading[class*="lg:mb-lg"] { margin-bottom: var(--space-lg); }
  .faq-heading[class*="lg:mb-xl"] { margin-bottom: var(--space-xl); }
  .faq-heading[class*="lg:mb-2xl"] { margin-bottom: var(--space-2xl); }
  .faq-heading[class*="lg:mb-3xl"] { margin-bottom: var(--space-3xl); }
  .faq-heading[class*="lg:mb-4xl"] { margin-bottom: var(--space-4xl); }
  .faq-heading[class*="lg:mb-5xl"] { margin-bottom: var(--space-5xl); }
}

/* FAQ Item */
.faq-item {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  /* Padding is now controlled via inline styles from settings */
}

/* Question Button */
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  min-height: 80px;
  gap: var(--space-md);
}

.faq-question:hover {
  opacity: 0.8;
}

/* FAQ Item Image */
.faq-item-image {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  outline-offset: 0;
  outline:4px solid var(--clr-white);
  border-radius:50%;
}

.faq-item-image--no-border {
  outline: none;
}

.faq-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.faq-question-text {
  flex: 1;
  line-height: 1.4;
}

/* Plus/Minus Icon */
.faq-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  position: relative;
}

.faq-icon svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.faq-icon .icon-plus {
  opacity: 1;
}

.faq-icon .icon-minus {
  opacity: 0;
}

/* When FAQ is open - Plus/Minus Icon (Square) */
.faq-item.is-open .faq-icon-plus .icon-plus {
  opacity: 0;
  transform: rotate(90deg);
}

.faq-item.is-open .faq-icon-plus .icon-minus {
  opacity: 1;
}

/* Regular Plus/Minus Icon (no square) */
.faq-icon-regular-plus {
  width: 24px;
  height: 24px;
}

.faq-icon-regular-plus .icon-plus {
  opacity: 1;
}

.faq-icon-regular-plus .icon-minus {
  opacity: 0;
}

/* When FAQ is open - Regular Plus/Minus Icon */
.faq-item.is-open .faq-icon-regular-plus .icon-plus {
  opacity: 0;
}

.faq-item.is-open .faq-icon-regular-plus .icon-minus {
  opacity: 1;
}

/* Chevron Icon */
.faq-icon-chevron {
  width: 24px;
  height: 24px;
}

.faq-icon-chevron .icon-chevron {
  transition: transform 0.3s ease;
  width: 100%;
  height: 100%;
}

/* When FAQ is open - Chevron Icon */
.faq-item.is-open .faq-icon-chevron .icon-chevron {
  transform: rotate(180deg);
}

/* Answer Panel */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.faq-answer-content {
  padding: 0 32px 18px 32px;
}

.faq-answer-content p {
  margin: 0;
  line-height: 1.5;
}

/* Full Width Image Styles */
.faq-full-width-image {
  width: 100%;
  margin-bottom: var(--space-lg);
}

.faq-full-width-image--above {
  margin-bottom: var(--space-lg);
  margin-top: 0;
}

.faq-full-width-image--below {
  margin-top: var(--space-lg);
  margin-bottom: 0;
}

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

/* Text with Side Image Layout */
.faq-text-with-image {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
}

.faq-text-with-image--has-side {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-lg);
}

.faq-side-image {
  flex-shrink: 0;
}

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

.faq-text-content {
  flex: 1;
  min-width: 0;
}

.faq-text-with-image--image-left {
  flex-direction: row;
}

.faq-text-with-image--image-right {
  flex-direction: row-reverse;
}

/* Mobile: Stack images and text vertically */
@media (max-width: 1023px) {
  .faq-text-with-image--has-side {
    flex-direction: column;
  }
  
  .faq-text-with-image--image-right {
    flex-direction: column;
  }
  
  .faq-side-image {
    width: 100% !important;
  }
  
  .faq-text-content {
    width: 100% !important;
  }
}

/* FAQ CTA Section */
.faq-cta {
  max-width: 550px;
}

/* CTA in left column should be left-aligned */
.learn-more-text .faq-cta {
  margin: 0;
  text-align: left;
}

/* Mobile Adjustments */
@media (max-width: 767px) {
  .faq-question {
    padding: 16px 24px;
    min-height: 70px;
    gap: var(--space-sm);
  }

  .faq-item-image {
    width: 50px;
    height: 50px;
  }

  .faq-icon {
    width: 24px;
    height: 24px;
  }

  .faq-answer-content {
    padding: 0 24px 16px 24px;
  }
}

/* Accessibility */
.faq-question:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.faq-question:focus:not(:focus-visible) {
  outline: none;
}

/* Card Grid Styles */
.card-grid-container {
  width: 100%;
}

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
  }
}

/* Full Width Image in Card Grid */
.card-grid-full-width-image {
  width: 100%;
}

.card-grid-full-width-image--top {
  margin-bottom: var(--space-xl);
}

.card-grid-full-width-image--under-description {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.card-grid-full-width-image--bottom {
  margin-top: var(--space-xl);
}

.card-grid-full-width-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Description with Side Image Layout */
.card-grid-description-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
  margin-bottom: var(--space-xl);
}

.card-grid-description-wrapper--has-side-image {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-lg);
}

.card-grid-side-image {
  flex-shrink: 0;
}

.card-grid-side-image img {
  width: 100%;
  height: auto;
  display: block;
}

.card-grid-description {
  flex: 1;
  min-width: 0;
  line-height: 1.5;
}

/* Mobile: Stack side image and description vertically */
@media (max-width: 1023px) {
  .card-grid-description-wrapper--has-side-image {
    flex-direction: column;
  }
  
  .card-grid-side-image {
    width: 100% !important;
  }
  
  .card-grid-description {
    width: 100% !important;
  }
}

.card-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
  padding: var(--space-lg);
}

.card-grid-logo {
  width: 100%;
  max-width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-grid-logo img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.card-grid-text {
  width: 100%;
  line-height: 1.5;
}

.card-grid-button {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: auto;
}

/* Own the richtext normalizer rather than borrowing faq-accordion-revamp's.

   The editor stores <h2>/<p> inside these blocks, and a matching element rule in
   design-system.css always beats an inherited value, so the size class on the
   wrapper is ignored unless the child is told to inherit. This section used to
   rely on faq-accordion-revamp's identical but UNSCOPED rule happening to be on
   the page; now it does not.

   `letter-spacing` is included because design-system.css sets -0.96px on h2 and
   the heading wants the inline -0.03em. Kept as `> *`, never a descendant `*` —
   `font-weight: inherit` on descendants would strip <strong> out of body copy,
   and several description blocks use it. */
.faq-heading-text > *,
.faq-description > * {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0 !important;
}

/* No heading, description or button block is visible, so do not reserve the 40%
   text gutter — give the FAQ stack the full column at every breakpoint. Emitted
   on exactly 1 of the 25 rendered instances today (the BUNDLEHEADER pack
   template); the other 24 are untouched. */
.learn-more-layout--no-text .learn-more-text {
  display: none;
}

.learn-more-layout--no-text .learn-more-faqs {
  flex: 1 1 100%;
  max-width: 100%;
  width: 100%;
}


/* 2026-09-25: keyboard focus ring inside the pill (the item clips an outside outline). */
[data-fluid-section-type="learn-more-stack"] .faq-question:focus-visible {
  outline-offset: -2px;
}

/* 2026-09-25 (D39/D40): below 1024px the `.learn-more-faqs .faq-grid { gap: var(--space-md) }`
   default above overrode the section's own gap setting (gap-lg on every PDP), so the ingredient
   pills sat 16px apart while the FAQ pills right after them sit 24px apart. Honour the setting
   on product pages; home and Feel It Prove It are untouched. */
@media (max-width: 1023px) {
  .product-layout-grid .learn-more-faqs .faq-grid.gap-xs { gap: var(--space-xs); }
  .product-layout-grid .learn-more-faqs .faq-grid.gap-sm { gap: var(--space-sm); }
  .product-layout-grid .learn-more-faqs .faq-grid.gap-md { gap: var(--space-md); }
  .product-layout-grid .learn-more-faqs .faq-grid.gap-lg { gap: var(--space-lg); }
  .product-layout-grid .learn-more-faqs .faq-grid.gap-xl { gap: var(--space-xl); }
}