/* ===========================================================
   evergreenpak — Premium Design System
   =========================================================== */

/* ----- Google Fonts (enqueued via wp_enqueue_style in PHP) ----- */

/* ----- CSS Custom Properties / Design Tokens ----- */
:root {
  --ep-bg-dark: #0f0f0f;
  --ep-bg-darker: #0a0a0a;
  --ep-bg-cream: #f1ece0;
  --ep-bg-cream-2: #ebe5d5;
  --ep-bg-green: #2a4639;
  --ep-bg-green-2: #233a2f;
  --ep-ink: #1a1a1a;
  --ep-ink-2: #4a4a4a;
  --ep-ink-3: #7a7a7a;
  --ep-on-dark: #e6e1d5;
  --ep-on-dark-2: #9a9388;
  --ep-on-dark-3: #6a6358;
  --ep-accent: #d24a3a;
  --ep-accent-2: #b73d2e;
  --ep-line-dark: rgba(230, 225, 213, 0.12);
  --ep-line-light: rgba(26, 26, 26, 0.14);
  --ep-line-mid: rgba(26, 26, 26, 0.22);
  --ep-line-qc: rgba(26, 26, 26, 0.32);
  --ep-line-green: rgba(230, 225, 213, 0.14);
}

/* ----- Base resets (scoped to evergreenpak widgets) ----- */
.evergreenpak *,
.evergreenpak *::before,
.evergreenpak *::after {
  box-sizing: border-box;
}

/* Link reset — no underline, inherit color */
/* High-specificity selector (html + class) overrides most theme link styles without !important */
.evergreenpak a,
.evergreenpak a:link,
.evergreenpak a:visited,
.evergreenpak a:hover,
.evergreenpak a:focus,
.evergreenpak a:active {
  color: inherit;
  text-decoration: none;
  border-bottom: none;
  box-shadow: none;
}

.evergreenpak button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* ----- Layout helpers ----- */
.evergreenpak .container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 56px;
}

.evergreenpak .mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400;
}

.evergreenpak .serif {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.015em;
}

/* ----- Diagonal stripe textures ----- */
.evergreenpak .stripes {
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 14px,
    rgba(255, 255, 255, 0.018) 14px,
    rgba(255, 255, 255, 0.018) 15px
  );
}
.evergreenpak .stripes-green {
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 14px,
    rgba(255, 255, 255, 0.025) 14px,
    rgba(255, 255, 255, 0.025) 15px
  );
}

/* ----- Buttons ----- */
.evergreenpak .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  font-family: inherit;
  cursor: pointer;
  border: none;
  text-decoration: none;
}
.evergreenpak .btn-primary {
  background: var(--ep-accent);
  color: #fff;
}
.evergreenpak .btn-primary:hover {
  background: var(--ep-accent-2);
}
.evergreenpak .btn-ghost {
  background: transparent;
  color: var(--ep-on-dark);
  border: 1px solid rgba(230, 225, 213, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  vertical-align: middle;
  line-height: 1.4;
}
.evergreenpak .btn-ghost:hover {
  color: #fff;
  border-color: rgba(230, 225, 213, 0.7);
}
/* Higher specificity to prevent Astra from eating border-bottom on <a> tag */
.evergreenpak .btn-group .btn-ghost {
  border-style: solid;
  border-width: 1px;
}
.evergreenpak .btn-outline {
  background: transparent;
  color: var(--ep-ink);
  border: 1px solid rgba(26, 26, 26, 0.35);
  transition: border-color 0.15s, color 0.15s;
}
.evergreenpak .btn-outline:hover {
  border-color: var(--ep-ink);
  color: #000;
}

/* ----- Section tag / eyebrow ----- */
.evergreenpak .section-tag {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ep-ink-3);
  margin-bottom: 26px;
}
.evergreenpak .section-tag .num {
  color: var(--ep-accent);
}
.evergreenpak .section-tag.on-green {
  color: var(--ep-on-dark-2);
}
.evergreenpak .section-tag.on-green .num {
  color: var(--ep-accent);
}

/* ----- Section title ----- */
.evergreenpak h2.section {
  font-family: 'Source Serif 4', serif;
  font-weight: 400;
  font-size: 56px;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ep-ink);
  margin-bottom: 24px;
  max-width: 760px;
}
.evergreenpak h2.section em {
  font-style: normal;
  color: var(--ep-accent);
  display: inline-block;
  transform: skewX(-8deg);
}
.evergreenpak h2.section.on-dark {
  color: var(--ep-on-dark);
}

/* ----- Section lede ----- */
.evergreenpak .section-lede {
  max-width: 560px;
  color: var(--ep-ink-2);
  font-size: 15px;
  line-height: 1.65;
}
.evergreenpak .section-lede.on-dark {
  color: var(--ep-on-dark-2);
}

/* ----- Section block spacing ----- */
.evergreenpak section.block {
  padding: 120px 0;
}
.evergreenpak section.block.alt {
  background: var(--ep-bg-cream-2);
}

/* ----- More link ----- */
.evergreenpak .more-link {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ep-ink);
  margin-top: 26px;
  display: inline-block;
  border-bottom: 1px solid var(--ep-ink);
  padding-bottom: 3px;
  transition: color 0.15s, border-color 0.15s;
}
.evergreenpak .more-link:hover {
  color: var(--ep-accent);
  border-bottom-color: var(--ep-accent);
}
.evergreenpak .more-link.lg {
  font-size: 14px;
  letter-spacing: 0.12em;
  font-weight: 500;
  color: var(--ep-accent);
  border-bottom: 2px solid var(--ep-accent);
  padding-bottom: 5px;
  margin-top: 32px;
}
.evergreenpak .more-link.lg:hover {
  color: var(--ep-accent-2);
  border-bottom-color: var(--ep-accent-2);
}
.evergreenpak .more-link.lg.on-dark {
  color: var(--ep-accent);
  border-bottom-color: var(--ep-accent);
}
.evergreenpak .more-link.lg.on-dark:hover {
  color: #e8634f;
  border-bottom-color: #e8634f;
}

/* ===========================================================
   HERO CAROUSEL
   =========================================================== */

/* Hero container */
.evergreenpak-hero.hero,
html .evergreenpak-hero.hero {
  position: relative;
  background: var(--ep-bg-dark);
  color: var(--ep-on-dark);
  min-height: 860px;
  overflow: hidden;
}

/* Diagonal stripe overlay */
.evergreenpak-hero.hero::before,
html .evergreenpak-hero.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 16px,
    rgba(255, 255, 255, 0.022) 16px,
    rgba(255, 255, 255, 0.022) 17px
  );
  pointer-events: none;
  z-index: 3;
}

/* Slide positioning */
.evergreenpak-hero .hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease;
  display: flex;
  align-items: center;
}
.evergreenpak-hero .hero-slide.active {
  opacity: 1;
  pointer-events: auto;
}

/* Inner content area */
.evergreenpak-hero .hero-inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 140px 56px 100px;
  position: relative;
  z-index: 2;
}

/* ---- EYEBROW (with RED DOT) ---- */
.evergreenpak-hero.hero .eyebrow,
html .evergreenpak-hero.hero .eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ep-on-dark-2);
  margin-bottom: 28px;
}

/* RED DOT — fixed selector: .evergreenpak and .hero are on the SAME element */
.evergreenpak-hero.hero .eyebrow .dot,
html .evergreenpak-hero.hero .eyebrow .dot,
.evergreenpak-evergreenpak-hero.hero .eyebrow .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--ep-accent);
  background: var(--ep-accent);
  flex-shrink: 0;
  position: relative;
  top: -1px;
}

/* Title */
.evergreenpak-hero.hero h1 {
  font-family: 'Source Serif 4', serif;
  font-weight: 400;
  font-size: 76px;
  line-height: 1.04;
  letter-spacing: -0.025em;
  max-width: 720px;
  margin-bottom: 28px;
  color: var(--ep-on-dark);
}
.evergreenpak-hero.hero h1 em {
  font-style: normal;
  display: inline-block;
  transform: skewX(-8deg);
}
.evergreenpak-hero.hero h1 .accent {
  color: var(--ep-accent);
  font-style: normal;
}
.evergreenpak-hero.hero h1 .accent-i {
  color: var(--ep-accent);
  font-style: normal;
  display: inline-block;
  transform: skewX(-8deg);
}

/* Lede paragraph */
.evergreenpak-hero.hero .lede {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ep-on-dark);
  opacity: 0.9;
  max-width: 480px;
  margin-bottom: 24px;
}

/* Tags row */
.evergreenpak-hero.hero .tags {
  color: var(--ep-on-dark-2);
  margin-bottom: 36px;
}
.evergreenpak-hero.hero .tags .sep {
  margin: 0 10px;
  opacity: 0.6;
}

/* Button group */
.evergreenpak-hero .btn-group {
  display: flex;
  gap: 14px;
  align-items: center;
}

/* Hero visual (SVG layer) */
.evergreenpak-hero .hero-visual {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Background image support on slide */
.evergreenpak-hero .hero-slide[style*="background-image"] .hero-visual {
  opacity: 0.35;
}

/* Slide 1 — factory skyline */
.evergreenpak-hero .factory-svg {
  position: absolute;
  right: 0; left: 0; bottom: 0;
  width: 100%;
  height: auto;
  display: block;
}

/* Slide 2 — products as ambient silhouettes behind text */
.evergreenpak-hero .products-row {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 6%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  z-index: 1;
}
.evergreenpak-hero .products-row > svg {
  display: block;
  opacity: 0.7;
}
.evergreenpak-hero .hero-slide.active .hero-inner {
  position: relative;
  z-index: 2;
}

/* Slide 3 — trees + moon */
.evergreenpak-hero .forest-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.evergreenpak-hero .moon {
  position: absolute;
  right: 22%; top: 22%;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: #b8402f;
}

/* Hero pagination bar */
.evergreenpak-hero .hero-pager {
  position: absolute;
  right: 56px;
  bottom: 40px;
  display: flex;
  gap: 36px;
  z-index: 5;
}
.evergreenpak-hero .hero-pager button {
  position: relative;
  background: transparent;
  color: var(--ep-on-dark-3);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  padding: 8px 0 10px;
  border: none;
  border-bottom: 1px solid rgba(230, 225, 213, 0.18);
  letter-spacing: 0.08em;
  min-width: 60px;
  text-align: left;
  transition: color 0.2s;
  cursor: pointer;
}
.evergreenpak-hero .hero-pager button::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  background: var(--ep-accent);
  transition: width 0.12s linear;
}
.evergreenpak-hero .hero-pager button.active {
  color: var(--ep-on-dark);
}
.evergreenpak-hero .hero-pager button.active::after {
  width: 100%;
}
.evergreenpak-hero .hero-pager button:hover {
  color: var(--ep-on-dark);
}

/* Vertical "next slide" */
.evergreenpak-hero .hero-next {
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ep-on-dark-3);
  padding: 18px 6px;
  transition: color 0.2s;
}
.evergreenpak-hero .hero-next:hover {
  color: var(--ep-on-dark);
}
.evergreenpak-hero .hero-next .label {
  writing-mode: vertical-rl;
}
.evergreenpak-hero .hero-next .arrow {
  color: var(--ep-accent);
}
.evergreenpak-hero .hero-next::before {
  content: "";
  display: block;
  width: 1px;
  height: 38px;
  background: rgba(230, 225, 213, 0.18);
}

/* Progress bar */
.evergreenpak-hero .hero-progress {
  position: absolute;
  left: 56px;
  right: 56px;
  bottom: 0;
  height: 1px;
  background: rgba(230, 225, 213, 0.08);
  z-index: 4;
}
.evergreenpak-hero .hero-progress .bar {
  height: 100%;
  background: var(--ep-accent);
  transition: width 0.12s linear;
}

/* ===========================================================
   STATS GRID
   =========================================================== */
.evergreenpak.stats {
  background: var(--ep-bg-cream);
  padding: 56px 0 64px;
  border-bottom: 1px solid var(--ep-line-light);
}
.evergreenpak.stats .row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
  padding-top: 22px;
  border-top: 1px solid var(--ep-line-light);
}

/* Number row — large serif */
.evergreenpak.stats .stat .n {
  font-family: 'Source Serif 4', serif;
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ep-ink);
  margin-bottom: 6px;
  line-height: 1.2;
}

/* Prefix/Suffix — small red accent (superscript style like target site) */
.evergreenpak.stats .stat .n .affix {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--ep-accent);
  font-size: 55%;
  font-weight: 400;
  margin: 0 0.12em;
  display: inline-block;
  vertical-align: super;
  line-height: 0;
}

/* Affix alignment options via data attribute */
.evergreenpak.stats .row[data-affix-align="super"] .affix {
  vertical-align: super;
}
.evergreenpak.stats .row[data-affix-align="top"] .affix {
  vertical-align: top;
}
.evergreenpak.stats .row[data-affix-align="middle"] .affix {
  vertical-align: middle;
}
.evergreenpak.stats .row[data-affix-align="bottom"] .affix {
  vertical-align: bottom;
}

/* Label beneath number */
.evergreenpak.stats .stat .lbl {
  color: var(--ep-ink-2);
  font-size: 14px;
  line-height: 1.45;
}

/* ===========================================================
   MORE LINK (standalone widget)
   =========================================================== */

/* ===========================================================
   QC CARDS (stage-box — matching target site exactly)
   =========================================================== */
.evergreenpak.qc {
  /* No padding — user controls spacing via Elementor section settings */
}

/* Outer container with shared border */
.evergreenpak .stage-box {
  display: grid;
  grid-template-columns: repeat(var(--qc-cols, 3), 1fr);
  border: 1px solid var(--ep-line-mid);
}

/* Individual cell — inner borders only */
.evergreenpak .stage-cell {
  padding: 30px 32px 36px;
  border-right: 1px solid var(--ep-line-mid);
}
/* Last cell: no right border */
.evergreenpak .stage-cell:last-child,
.evergreenpak .stage-cell[style*="border-right:none"] {
  border-right: none;
}

/* Number row — red dash + monospace number */
.evergreenpak .stage-cell .num {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ep-accent);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  margin-bottom: 18px;
}
/* Red dash before number */
.evergreenpak .stage-cell .num::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--ep-accent);
  flex-shrink: 0;
}

/* Title — serif */
.evergreenpak .stage-cell h3 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 400;
  font-size: 21px;
  letter-spacing: -0.015em;
  color: var(--ep-ink);
  margin-bottom: 14px;
  line-height: 1.25;
}

/* Description paragraph */
.evergreenpak .stage-cell p {
  color: var(--ep-ink-2);
  font-size: 13px;
  line-height: 1.65;
}

/* ===========================================================
   PRODUCT GRID — matches at8.fun #products (exact source values)
   All colours use CSS custom properties; defaults = reference site.
   Users can override via Elementor Style controls.
   =========================================================== */

/* ---- Design-token defaults (fallback when no inline style) ---- */
.evergreenpak.pg {
  --pg-accent:     #d24a3a;
  --pg-card-bg:    #181715;
  --pg-body-bg:    #f4f0e4;
  --pg-icon-dark:  #1a1815;
  --pg-icon-red:   #1f1411;
  --pg-icon-green: #151e18;
  --pg-line:       rgba(26, 26, 26, 0.14);
  --pg-title:      #1a1a1a;
  --pg-subtitle:   #7a7a7a;
  --pg-desc:       #4a4a4a;
  --pg-chevron:    #7a7a7a;

  padding: 0;
}
.evergreenpak .prod-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 0;
  background: var(--pg-line);
  padding: 0;
}
.evergreenpak .prod-card {
  background: var(--pg-card-bg);
  color: #e6e1d5;
  position: relative;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* —— icon area —— */
.evergreenpak .prod-card .icon-area {
  flex: 1;
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px;
  background-color: var(--pg-icon-dark);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0, transparent 7px,
    rgba(255,255,255,0.04) 7px,
    rgba(255,255,255,0.04) 8px
  );
}
.evergreenpak .prod-card .icon-area.red {
  background-color: var(--pg-icon-red);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0, transparent 7px,
    rgba(210,74,58,0.22) 7px,
    rgba(210,74,58,0.22) 8px
  );
}
.evergreenpak .prod-card .icon-area.green {
  background-color: var(--pg-icon-green);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0, transparent 7px,
    rgba(74,158,118,0.2) 7px,
    rgba(74,158,118,0.2) 8px
  );
}

/* SVG / image inside icon area */
.evergreenpak .prod-card .icon-area > svg {
  width: 100%;
  height: auto;
  max-width: 360px;
  display: block;
}
.evergreenpak .prod-card .icon-area > img {
  width: auto;
  height: auto;
  max-width: 85%;
  max-height: 240px;
  object-fit: contain;
  display: block;
}

/* —— body: cream info area —— */
.evergreenpak .prod-card .body {
  background: var(--pg-body-bg);
  color: var(--pg-title);
  padding: 22px 24px 24px;
  border-top: 1px solid #e5dfd0;
}

/* head row: title + chevron */
.evergreenpak .prod-card .body .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.evergreenpak .prod-card .body .head h3 {
  font-family: 'Source Serif 4', serif;
  font-weight: 400;
  font-size: 19px;
  letter-spacing: -0.015em;
  color: var(--pg-title);
}
.evergreenpak .prod-card .body .head .chev {
  color: var(--pg-chevron);
  font-size: 16px;
}

/* subtitle: mono uppercase */
.evergreenpak .prod-card .body .sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pg-subtitle);
  margin-bottom: 12px;
}

/* description text */
.evergreenpak .prod-card .body .desc {
  font-size: 12.5px;
  color: var(--pg-desc);
  line-height: 1.6;
  margin-bottom: 12px;
}

/* spec list with dashed separator + accent dot */
.evergreenpak .prod-card .body ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11.5px;
  color: var(--pg-desc);
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px dashed rgba(26,26,26,0.18);
}
.evergreenpak .prod-card .body ul li::before {
  content: "• ";
  color: var(--pg-accent);
  margin-right: 6px;
}

/* ===========================================================
   FAQ ACCORDION (faq) — exact clone of faq.html reference
   =========================================================== */

/* Wrapper */
.evergreenpak.faq .faq-wrap {
  padding-bottom: 40px;
}

/* Two-column grid: cat (left sticky) + faq-list (right) */
.evergreenpak.faq .faq-group {
  display: grid;
  grid-template-columns: 1fr 2.1fr;
  gap: 0 48px;
  padding-top: 18px;
}
.evergreenpak.faq .faq-group + .faq-group {
  margin-top: 56px;
}

/* Category label — green, sticky */
.evergreenpak.faq .faq-group .cat {
  color: #1d4d36;
  align-self: start;
  position: sticky;
  top: 110px;
}

/* Question list container */
.evergreenpak.faq .faq-list {
  border-top: 1px solid rgba(26, 26, 26, 0.14);
}

/* Each FAQ item */
.evergreenpak.faq .faq-item {
  border-bottom: 1px solid rgba(26, 26, 26, 0.10);
}

/* Question button — 3-column grid: number | text | icon */
.evergreenpak.faq .faq-q {
  width: 100%;
  display: grid;
  grid-template-columns: 40px 1fr 24px;
  align-items: start;
  gap: 16px;
  padding: 28px 0;
  text-align: left;
  background: none;
  border: none;
  /* Reset theme global button styles (e.g. Astra sets border-radius + box-shadow on `button`) */
  border-radius: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
}

/* Question number (01, 02 …) */
.evergreenpak.faq .faq-q .qnum {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #d24a3a;
  letter-spacing: 0.08em;
  padding-top: 7px;
}

/* Question text — serif, green */
.evergreenpak.faq .faq-q .qtext {
  font-family: 'Source Serif 4', serif;
  font-weight: 400;
  font-size: 23px;
  letter-spacing: -0.015em;
  color: #1d4d36;
  line-height: 1.25;
}
.evergreenpak.faq .faq-q .qtext sup {
  font-size: 0.62em;
  vertical-align: super;
}

/* +/- toggle icon */
.evergreenpak.faq .faq-q .qicon {
  display: inline-block;
  position: relative;
  width: 18px;
  height: 18px;
  margin-top: 8px;
  justify-self: end;
}
.evergreenpak.faq .faq-q .qicon::before,
.evergreenpak.faq .faq-q .qicon::after {
  content: "";
  position: absolute;
  background: #d24a3a;
  transition: opacity 0.2s, transform 0.2s;
}
/* horizontal bar (always visible = minus when open) */
.evergreenpak.faq .faq-q .qicon::before {
  left: 0; top: 8px; width: 18px; height: 2px;
}
/* vertical bar (hidden when open = minus) */
.evergreenpak.faq .faq-q .qicon::after {
  left: 8px; top: 0; width: 2px; height: 18px;
}
/* OPEN state: hide vertical bar → shows minus "—" */
.evergreenpak.faq .faq-item.open .faq-q .qicon::after {
  opacity: 0;
  transform: scaleY(0);
}
.evergreenpak.faq .faq-item.open .faq-q .qtext {
  color: #1d4d36;
}

/* Answer area — collapse/expand via grid-template-rows */
.evergreenpak.faq .faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.evergreenpak.faq .faq-a-inner {
  overflow: hidden;
}
/* OPEN state: show content */
.evergreenpak.faq .faq-item.open .faq-a {
  grid-template-rows: 1fr;
}
.evergreenpak.faq .faq-a-inner p {
  padding: 0 24px 30px 56px;
  max-width: 600px;
  color: #44423d;
  font-size: 14px;
  line-height: 1.7;
}

/* Responsive: single column on mobile */
@media (max-width: 900px) {
  .evergreenpak.faq .faq-group {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .evergreenpak.faq .faq-group .cat {
    position: static;
  }
}

/* ===========================================================
   BACK TO TOP
   =========================================================== */
.evergreenpak.to-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 200;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ep-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.15s ease;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22);
  border: none;
}
.evergreenpak.to-top.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.evergreenpak.to-top:hover {
  background: var(--ep-accent-2);
}
.evergreenpak.to-top svg {
  display: block;
}

/* ============================================================
   SUSTAINABILITY SECTION — 1:1 exact match reference index.html
   Target: C:/Users/漫步白月光/Desktop/evergreenpak/PAGES/index.html
   HTML lines 1681-1758, CSS lines 711-786
   ============================================================ */

/* ---- Force Elementor wrappers transparent so green bleeds through ---- */
html body .elementor-widget-evergreenpak-sustainability,
html body .elementor-widget-evergreenpak-sustainability > .elementor-widget-container {
  background: transparent;
  background-color: transparent;
}

/* ---- Root section: green background + stripe texture ---- */
html body .green-block.stripes-green {
  background-color: var(--ep-bg-green, #2a4639);
  color: var(--ep-on-dark, #e6e1d5);
  padding: 130px 0 140px;
  position: relative;
  overflow: hidden;
}

/* Stripe texture (matches target: 16px/0.020 opacity pattern) */
html body .green-block.stripes-green::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 16px,
    rgba(255, 255, 255, 0.020) 16px,
    rgba(255, 255, 255, 0.020) 17px
  );
  pointer-events: none;
  z-index: 0;
}

/* Custom background image layer (overrides default green when set) */
html body .sustainability-bg-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
html body .sustainability-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Tree silhouette SVG at bottom */
html body .green-trees {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%; height: auto;
  z-index: 1;
  pointer-events: none;
  opacity: 0.9;
}

/* Container sits above all bg layers */
html body .green-block.stripes-green > .container {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 56px;
  padding-right: 56px;
}

/* ============================================================
   Section Tag: <div class="section-tag mono on-green">
   Target CSS: lines 440-450
   ============================================================ */
html body .green-block.stripes-green .section-tag.mono.on-green {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ep-on-dark-2, #9a9388);
  margin-bottom: 26px;
  font-family: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
html body .green-block.stripes-green .section-tag.mono.on-green .num {
  color: var(--ep-accent, #d24a3a);
}

/* ============================================================
   Title: <h2 class="section on-dark">
   Target CSS: lines 452-469 — includes skewX(-8deg) for <em>
   ============================================================ */
html body .green-block.stripes-green .section.on-dark {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 400;
  font-size: 56px;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ep-on-dark, #e6e1d5);
  margin-bottom: 24px;
  max-width: 760px;
}
html body .green-block.stripes-green .section.on-dark em {
  font-style: normal;
  color: var(--ep-accent, #d24a3a);
  display: inline-block;
  transform: skewX(-8deg);
}

/* Title / subtitle link wrappers */
html body .green-block.stripes-green .section-title-link,
html body .green-block.stripes-green .section-subtitle-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.15s ease;
}
html body .green-block.stripes-green .section-title-link:hover,
html body .green-block.stripes-green .section-subtitle-link:hover {
  opacity: 0.85;
  text-decoration: none;
}
html body .green-block.stripes-green .section-title-link:hover h2.section.on-dark,
html body .green-block.stripes-green .section-subtitle-link:hover p.section-lede.on-dark {
  color: inherit;
}

/* ============================================================
   Subtitle / Lede: <p class="section-lede on-dark">
   Target CSS: lines 471-477
   ============================================================ */
html body .green-block.stripes-green .section-lede.on-dark {
  max-width: 560px;
  color: var(--ep-on-dark-2, #9a9388);
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 48px;
}

/* ============================================================
   Cards Grid: <div class="sus-grid">
   Target CSS: lines 740-744
   ============================================================ */
html body .green-block.stripes-green .sus-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
  margin-top: 80px;
}

/* ============================================================
   Card: <div class="sus-card">
   TARGET: ONLY top border, no radius, minimal padding-top
   Target CSS: lines 746-777
   ============================================================ */
html body .green-block.stripes-green .sus-card {
  border-top: 1px solid var(--ep-line-green, rgba(230,225,213,0.14));
  padding-top: 22px;
  transition: border-color 0.2s ease;
}

/* Card number: <div class="num"> — red accent line + red text
   Target CSS: lines 750-765
   NOTE: HTML outputs JUST the number (no dash), ::before draws the line */
html body .green-block.stripes-green .sus-card .num {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ep-accent, #d24a3a);
  font-family: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  margin-bottom: 16px;
}
html body .green-block.stripes-green .sus-card .num::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--ep-accent, #d24a3a);
}

/* Card title: <h3> — Target: 15px, weight 500, on-dark color
   Target CSS: lines 766-772
*/
html body .green-block.stripes-green .sus-card h3 {
  font-size: 15px;
  font-weight: 500;
  color: var(--ep-on-dark, #e6e1d5);
  margin-bottom: 14px;
  line-height: 1.35;
}

/* Card title link wrapper */
html body .sus-card-title-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Card description: <p> — Target: 13px, on-dark-2 color
   Target CSS: lines 773-777
*/
html body .green-block.stripes-green .sus-card p {
  color: var(--ep-on-dark-2, #9a9388);
  font-size: 13px;
  line-height: 1.65;
}

html body .sus-card-desc-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* ============================================================
   Footer + More Link: <div class="sus-foot">
   Target CSS: lines 778-786 — right-aligned!
   ============================================================ */
html body .green-block.stripes-green .sus-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 56px;
}
html body .green-block.stripes-green .sus-foot.align-left {
  justify-content: flex-start;
}
html body .green-block.stripes-green .sus-foot.align-center {
  justify-content: center;
}
html body .green-block.stripes-green .sus-foot.align-right {
  justify-content: flex-end;
}

/*
 * More Link .lg.on-dark — underlined style matching target
 * Target CSS: lines 537-549 (.more-link.lg.on-dark)
 */
html body .green-block.stripes-green .more-link.lg.on-dark {
  font-family: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ep-accent, #d24a3a);
  border-bottom: 2px solid var(--ep-accent, #d24a3a);
  padding-bottom: 5px;
  display: inline-block;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}
html body .green-block.stripes-green .more-link.lg.on-dark:hover {
  color: #e8634f;
  border-bottom-color: #e8634f;
}

/* ============================================================
   Sustainability Responsive — matches target breakpoints
   ============================================================ */
@media (max-width: 1100px) {
  html body .green-block.stripes-green .sus-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  html body .green-block.stripes-green .section.on-dark {
    font-size: 42px;
  }
}
@media (max-width: 768px) {
  html body .green-block.stripes-green .sus-grid {
    grid-template-columns: 1fr;
  }
  html body .green-block.stripes-green .section.on-dark {
    font-size: 34px;
  }
  html body .green-block.stripes-green > .container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ===========================================================
   RESPONSIVE (other widgets)
   =========================================================== */
@media (max-width: 960px) {
  .evergreenpak.stats .row {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
  .evergreenpak .prod-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .evergreenpak.client-cell {
    flex-basis: calc(33.33% - 11px);
  }
}
@media (max-width: 680px) {
  .evergreenpak-hero.hero h1 {
    font-size: 40px;
  }
  .evergreenpak-hero .hero-inner {
    padding: 120px 36px 80px;
  }
  .evergreenpak.stats .row {
    grid-template-columns: 1fr;
  }
  .evergreenpak .prod-grid {
    grid-template-columns: 1fr;
  }
  .evergreenpak.client-cell {
    flex-basis: calc(50% - 8px);
  }
  .evergreenpak .container {
    padding: 0 24px;
  }
  .evergreenpak h2.section {
    font-size: 36px;
  }
  .evergreenpak .faq-q .qtext {
    font-size: 18px;
  }
}

/* ===========================================================
   BACK TO TOP  (.to-top)  —  matches static index.html exactly
   Output via wp_footer (evergreenpak_back_to_top). Shown on
   scroll by toggling .show (evergreenpak.js -> initBackToTop).
   No !important used; .to-top is a unique global class.
   =========================================================== */
.to-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 200;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ep-accent);
  color: #fff;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.15s ease;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22);
  overflow: visible;
}
.to-top.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.to-top:hover {
  background: #b73d2e;
}
/* High-specificity selectors to beat theme global button/svg overrides.
   Uses #to-top ID (1,0,0) + element — no !important needed. */
#to-top svg {
  display: block;
  width: 16px;
  height: 16px;
  color: #fff;
  fill: none;
  stroke: currentColor;
}
#to-top svg path {
  stroke: #fff;
  fill: none;
}
/* Fallback hide for Astra's native button (in case its disable
   filter is unavailable on a given Astra version). High specificity,
   no !important. */
#ast-scroll-top.ast-scroll-top-icon {
  display: none;
}