/* Envana designsystem: Bagoss Standard (rubrik, eyebrow-labels, namn,
   länkar) + Hanken Grotesk (lästext). Tokens i envana-custom.css (--env-*).
   Facit: Figma Creatives, page "Envana design system DRAFT".
   OBS: ingrediens-ikonerna (envana-pdp-*.png) är illustrerade bitmaps och
   behålls EXAKT som de är — Rasmus beslut, "de tillför liv". Färgregel 6
   gäller inte dem. Gamla blush-gradienten är ersatt med helvit yta. */
.epdp-ingredients { background: var(--env-bg-base); padding: 48px 0; }
/* Dubbelklass slår .epdp-regeln i envana-pdp-base.css, som laddas om av
   varje ännu inte ombyggd epdp-sektion längre ner på sidan och annars
   vinner källordningen. Tas ned till .epdp-ingredients när alla bytt. */
.epdp.epdp-ingredients { font-family: var(--env-font-body); color: var(--env-text-body); }
.epdp-ingredients__inner { display: flex; flex-direction: column; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Sektionsrubrik — H1-skalan 40/45, Bagoss Regular, ink, centrerad.
   Bryter till två rader via <br> i markupen. */
.epdp-ingredients__title { margin: 0 0 8px; font-family: var(--env-font-heading); font-weight: 400; font-size: 40px; line-height: 45px; letter-spacing: -0.03em; color: var(--env-text-heading); text-align: center; }

/* Ingrediensrader — hairline-dividers i border/subtle, aldrig svart */
.epdp-ingredients__row { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 20px; align-items: start; padding: 28px 0; border-bottom: 1px solid var(--env-border-subtle); }
.epdp-ingredients__left { display: flex; flex-direction: column; align-items: flex-start; }
.epdp-ingredients__media { width: 100%; display: flex; align-items: center; column-gap: 15px; }
.epdp-ingredients__img { display: block; width: 100px; height: 100px; object-fit: cover; flex-shrink: 0; }
.epdp-ingredients__head { display: flex; flex-direction: column; justify-content: center; row-gap: 6px; flex-grow: 1; min-width: 0; }
/* Eyebrow — Label-skalan: Bagoss Medium 13/16, +3% versaler, ink */
.epdp-ingredients__label { margin: 0; font-family: var(--env-font-heading); font-weight: 500; font-size: 13px; line-height: 16px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--env-text-heading); overflow-wrap: break-word; }
/* Namn — H3-skalan: Bagoss Regular 22/28 (kursiven i gamla designen
   utgår, regel 1: inga italics) */
.epdp-ingredients__name { margin: 0; font-family: var(--env-font-heading); font-style: normal; font-weight: 400; font-size: 22px; line-height: 28px; letter-spacing: -0.02em; color: var(--env-text-heading); overflow-wrap: break-word; }
.epdp-ingredients__right { display: flex; align-items: center; }
.epdp-ingredients__desc { margin: 0; font-size: 16px; line-height: 24px; letter-spacing: -0.01em; color: var(--env-text-body); overflow-wrap: break-word; }

/* Studielänk — Label-skalan i brand-700 (text i märkesfärg på vit yta) */
.epdp-ingredients__studies { display: block; padding-top: 28px; font-family: var(--env-font-heading); font-weight: 500; font-size: 13px; line-height: 16px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--env-text-link); text-decoration: underline; text-underline-offset: 3px; }

/* Utfällbar ingredienslista — samma länkstil; chevronen ärver
   currentColor från headern */
.epdp-ingredients__acc { display: flex; flex-direction: column; align-items: center; padding-top: 14px; }
.epdp-ingredients__acc-header { display: flex; align-items: center; column-gap: 6px; margin: 0; padding: 0; background: none; border: 0; text-align: left; cursor: pointer; font-family: var(--env-font-heading); font-weight: 500; font-size: 13px; line-height: 16px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--env-text-link); }
.epdp-ingredients__acc-title { text-decoration: underline; text-underline-offset: 3px; }
.epdp-ingredients__acc-icon { width: 14px; height: 14px; flex-shrink: 0; transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1); }
.epdp-ingredients__acc-icon svg { display: block; width: 100%; height: auto; max-height: 100%; }
.epdp-ingredients__acc-header[aria-expanded="true"] .epdp-ingredients__acc-icon { transform: rotate(180deg); }
.epdp-ingredients__acc-list { width: 250px; padding: 20px 0; font-size: 16px; line-height: 24px; letter-spacing: -0.01em; color: var(--env-text-body); overflow-wrap: break-word; }
.epdp-ingredients__acc-list p { margin: 0; }

/* Mobil — samma brytpunkt som hero (989px). Brödtext och namn (H3)
   ändras aldrig på mobil, bara rubriken och layouten. */
@media screen and (max-width: 989px) {
  .epdp-ingredients { padding: 32px 0; }
  .epdp-ingredients__title { font-size: 32px; line-height: 36px; }
  .epdp-ingredients__row { grid-template-columns: minmax(0, 1fr); row-gap: 12px; padding: 20px 0; }
  .epdp-ingredients__img { width: 60px; height: 60px; }
}