/* Increased specificity to override aggressive WordPress/WooCommerce theme button styles */
.accordions {
  border-top: 1px solid var(--f20, #e0e0e0);
  background: var(--white, #ffffff) !important;
  width: 100%;
}

.accordions .accordion {
  border-bottom: 1px solid var(--f20, #e0e0e0);
  background: var(--white, #ffffff) !important;
}

.accordions .accordion-btn {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 18px !important;
  background: var(--white, #ffffff) !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer;
  font-family: "Futura", Sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: var(--forest, #162721) !important;
  text-align: left !important;
  transition: background .15s;
  box-shadow: none !important;
  outline: none !important;
  margin: 0 !important;
  text-transform: none !important;
}

.accordions .accordion-btn:hover {
  background: var(--f08, rgba(22, 39, 33, 0.04)) !important;
}

.accordions .accordion-btn::after {
  content: '+' !important;
  font-size: 18px !important;
  color: var(--f50, #737373) !important;
  transition: transform .25s !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  font-weight: 300 !important;
}

.accordions .accordion-btn.open::after {
  transform: rotate(45deg) !important;
}

.accordions .accordion-body {
  display: none;
  padding: 20px 20px;
  background: var(--white, #ffffff);
}

.accordions .accordion-body.open {
  display: block;
  animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Details content generic */
.accordions .details-list {
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.accordions .detail-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.accordions .detail-icon {
  width: 36px !important;
  height: 36px !important;
  flex-shrink: 0 !important;
  background: var(--leaf-pale, #f4f8e2) !important;
  border: 1px solid rgba(159, 184, 64, .2) !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.accordions .detail-title {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--forest, #162721) !important;
  margin-bottom: 1px !important;
}

.accordions .detail-desc {
  font-size: 12.5px !important;
  color: var(--f50, #737373) !important;
  line-height: 1.5 !important;
  font-weight: 300 !important;
  margin: 0 !important;
}

/* How to use content generic */
.accordions .use-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

.accordions .use-card {
  background: var(--warm, #fdfaf3) !important;
  border: 1px solid var(--f20, #e0e0e0) !important;
  border-radius: var(--rl, 12px) !important;
  padding: 14px 12px !important;
}

.accordions .use-emoji {
  display: flex !important;
  margin-bottom: 8px !important;
}

.accordions .use-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--forest, #162721) !important;
  margin-bottom: 2px !important;
}

.accordions .use-temp {
  font-size: 11px !important;
  color: var(--leaf, #9fb840) !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

/* Nutrition content */
.accordions .nutr-wrap {
  border: 1px solid var(--f20, #e0e0e0) !important;
  border-radius: var(--rl, 12px) !important;
  overflow: hidden !important;
}

.accordions .nutr-hdr {
  background: var(--forest, #162721) !important;
  color: var(--cream, #fdfbd4) !important;
  padding: 12px 14px !important;
}

.accordions .nutr-title {
  font-family: "Futura", Sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
}

.accordions .nutr-serving {
  font-size: 11px !important;
  color: rgba(253, 251, 212, .6) !important;
  margin-top: 2px !important;
}

.accordions .nutr-cols {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  background: rgba(22, 39, 33, .04) !important;
  padding: 7px 14px !important;
  border-bottom: 1px solid var(--f20, #e0e0e0) !important;
}

.accordions .nutr-col-h {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--f50, #737373) !important;
  letter-spacing: .05em !important;
  text-align: center !important;
}

.accordions .nutr-col-h:first-child {
  text-align: left !important;
}

.accordions .nutr-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  padding: 8px 14px !important;
  border-bottom: 1px solid var(--f20, #e0e0e0) !important;
  background: var(--white, #ffffff) !important;
}

.accordions .nutr-row:last-child {
  border-bottom: none !important;
}

.accordions .nutr-row.sub {
  padding-left: 26px !important;
  background: rgba(22, 39, 33, .015) !important;
}

.accordions .nutr-label {
  font-size: 12.5px !important;
  color: var(--forest, #162721) !important;
  font-weight: 400 !important;
}

.accordions .nutr-val {
  font-family: "Futura", Sans-serif !important;
  font-size: 12.5px !important;
  color: var(--forest, #162721) !important;
  text-align: center !important;
  font-variant-numeric: lining-nums !important;
}

.accordions .nutr-rda {
  font-family: "Futura", Sans-serif !important;
  font-size: 12px !important;
  color: var(--f50, #737373) !important;
  text-align: center !important;
  font-variant-numeric: lining-nums !important;
}

.accordions .nutr-note {
  font-size: 10.5px !important;
  color: var(--f50, #737373) !important;
  padding: 10px 14px !important;
  background: var(--warm, #fdfaf3) !important;
  line-height: 1.5 !important;
  border-top: 1px solid var(--f20, #e0e0e0) !important;
}

@media (max-width: 768px) {

  .accordions .nutr-cols,
  .accordions .nutr-row {
    grid-template-columns: 50% 25% 25% !important;
  }
}