/** Shopify CDN: Minification failed

Line 6:19 Unexpected "-->"

**/
<!-- Scoped styles -->

/* --------------------------------------------------------
   FAQ ACCORDION – THEME: GREEN (#648a20)
---------------------------------------------------------*/

:root {
  --faq-accent: #648a20;
  --faq-accent-dark: #4c6918;
  --faq-accent-soft-bg: #f7fbef;
}

/* Accordion FAQ styles (scoped to .product-faqs.faq-accordion) */
.product-faqs.faq-accordion {
  max-width: 920px;
  margin: 24px auto;
  padding: 18px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(12,18,30,0.04);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  box-sizing: border-box;
  width: 100%;
  display: block;
  align-self: center;
}

/* FAQ main heading text (the metafield heading) */
.product-faqs.faq-accordion .faq-heading {
  margin: 0 0 10px 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #0b2b45;
}

/* Controls row: search + toggle-all */
.faq-controls {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

.faq-search {
  flex: 1;
  min-width: 180px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #e6eef9;
  background: #fbfdff;
}

/* FAQ list + items */
.faq-list { 
  list-style: none;
  padding: 0;
  margin: 0;
}

.faq-item { 
  border-top: 1px solid #f0f2f7;
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.faq-item:first-of-type { 
  border-top: 0;
}

/* Question button */
.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 12px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-size: 1rem;
  color: #0b2b45;
}

.faq-question .faq-q-text {
  flex: 1;
  font-size: 1.05rem;
  font-weight: 600;
  color: #0b2b45;
  line-height: 1.45;
}

/* Focus outline – green themed */
.faq-question:focus {
  outline: 3px solid rgba(100,138,32,0.28);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Chevron icon */
.faq-question .faq-chevron {
  margin-left: 12px;
  transition: transform .18s ease;
  font-size: 1.2rem;
  font-weight: 400;
  color: #64748b;
}

/* Answers */
.faq-answer {
  padding: 0 12px 14px 12px;
  line-height: 1.65;
  color: #374151;
  font-size: 0.975rem;
  font-weight: 400;
}

/* Expanded state styling */
.faq-item[aria-expanded="true"] {
  background-color: var(--faq-accent-soft-bg);  /* soft green wash */
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
  border-left: 3px solid var(--faq-accent);
}

.faq-item[aria-expanded="true"] .faq-chevron {
  transform: rotate(90deg);
  color: var(--faq-accent);
}

/* Hover state for questions */
.product-faqs.faq-accordion .faq-question:hover {
  background-color: rgba(100,138,32,0.07);
}

/* Hidden state */
.faq-answer[hidden] { 
  display: none;
}

/* Small screens */
@media (max-width: 640px) {
  .faq-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .faq-question {
    padding: 12px;
    font-size: 0.98rem;
  }
}

/* Utility for visually-hidden (for accessibility) */
.visually-hidden { 
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}

/* Make sure inner list doesn't stretch beyond container */
.product-faqs.faq-accordion .faq-list,
.product-faqs.faq-accordion .faq-content {
  width: 100%;
  box-sizing: border-box;
}

/* If theme forces full-bleed on direct children, override */
.product-faqs.faq-accordion > * {
  max-width: 100%;
}

/* On very small screens, allow edge-to-edge with padding */
@media (max-width: 520px){
  .product-faqs.faq-accordion { 
    margin: 12px; 
    padding: 12px; 
    border-radius: 10px; 
  }
}

/* --------------------------------------------------------
   FAQ ACTION / BUTTONS – GREEN THEME
---------------------------------------------------------*/

/* For dynamic button wrapper */
.faq-action-wrap { 
  margin-top: 10px; 
  display: flex; 
  gap: 10px; 
}

/* Generic CTA-style FAQ button */
.faq-action {
  background: linear-gradient(180deg, var(--faq-accent), var(--faq-accent-dark));
  color: #fff;
  border: 0;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(100,138,32,0.18);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

.faq-action:active { 
  transform: translateY(1px) scale(.998); 
}

.faq-action[disabled] { 
  opacity: .6; 
  cursor: default; 
  transform: none; 
  box-shadow: none; 
}

/* Toggle all button visual styles + effects */
.faq-toggle-all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  font-weight: 600;
  background: linear-gradient(180deg, var(--faq-accent), var(--faq-accent-dark));
  color: #fff;
  box-shadow: 0 8px 26px rgba(100,138,32,0.22);
  transform-origin: center;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  font-size: 0.95rem;
  letter-spacing: 0.2px;
}

.faq-toggle-all:active { 
  transform: translateY(1px) scale(.995); 
}

.faq-toggle-all[disabled] { 
  opacity: .6; 
  cursor: default; 
  box-shadow: none; 
  transform: none; 
}

/* Icon: rotate when pressed (we toggle a state class in JS) */
.faq-toggle-all .faq-toggle-icon {
  display: inline-block;
  transition: transform .28s cubic-bezier(.2,.9,.2,1);
  font-size: 1.05rem;
  line-height: 1;
}

/* When aria-pressed = true, rotate icon */
.faq-toggle-all[aria-pressed="true"] .faq-toggle-icon {
  transform: rotate(180deg) scale(1.05);
}

/* Small pulse effect when toggled on */
.faq-toggle-all.pulse {
  animation: faqPulse .9s ease;
}

@keyframes faqPulse {
  0% { box-shadow: 0 8px 26px rgba(100,138,32,0.22); transform: translateY(0) scale(1); }
  50% { box-shadow: 0 12px 40px rgba(100,138,32,0.28); transform: translateY(-2px) scale(1.02); }
  100% { box-shadow: 0 8px 26px rgba(100,138,32,0.22); transform: translateY(0) scale(1); }
}

/* Small responsive tweak */
@media (max-width: 640px) {
  .faq-toggle-all { 
    width: 100%; 
    justify-content: center; 
  }
}

/* --------------------------------------------------------
   FAQ FONT SYSTEM (No external font)
---------------------------------------------------------*/
.product-faqs.faq-accordion,
.product-faqs.faq-accordion * {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Fira Sans",
    "Droid Sans",
    "Helvetica Neue",
    Arial,
    sans-serif;
}

/* --------------------------------------------------------
   Smooth mount animation for FAQ container
---------------------------------------------------------*/

/* Initial state: hidden + slightly shifted */
.product-faqs.faq-accordion {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.28s ease-out,
    transform 0.28s ease-out;
}

/* Once JS has mounted accordion, reveal smoothly */
.product-faqs.faq-accordion.faq-mounted {
  opacity: 1;
  transform: translateY(0);
}


/* Lock FAQ container height so page does NOT expand on click */
.product-faqs.faq-accordion {
  max-height: 420px;     /* set desired visible height */
  overflow: hidden;
  position: relative;
}

/* Inside scroll area */
.product-faqs.faq-accordion .faq-content {
  max-height: 100%;
  overflow-y: auto;
  padding-right: 6px;
  box-sizing: border-box;
}

/* nicer scrollbar */
.product-faqs.faq-accordion .faq-content::-webkit-scrollbar {
  width: 6px;
}
.product-faqs.faq-accordion .faq-content::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 20px;
}

/* Make FAQ container a positioning context */
.product-faqs.faq-accordion .faq-answer {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
}


/* Each FAQ item will be the anchor for its answer overlay */
.product-faqs.faq-accordion .faq-item {
  position: relative;
  /* keep your existing border-top, transitions, etc. */
}

/* Turn answers into overlays instead of block content */
.product-faqs.faq-accordion .faq-answer {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;              /* just below the question row */
  margin-top: 6px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.16);
  padding: 12px 14px;
  z-index: 5;
}

/* When hidden attribute is present, keep it invisible */
.product-faqs.faq-accordion .faq-answer[hidden] {
  display: none;
}

/* Optional: when item is expanded, give the question a subtle background */
.product-faqs.faq-accordion .faq-item[aria-expanded="true"] .faq-question {
  background-color: rgba(100,138,32,0.07);
  border-radius: 8px;
}

/* Optional: add extra bottom padding to the whole block so overlay doesn't visually clash with next section */
.product-faqs.faq-accordion {
  padding-bottom: 40px;
}