/* Product detail pages — styles from live Elementor HTML widgets */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800;900&family=Source+Sans+3:wght@400;500;600;700&display=swap');

/* === banana hero === */

  /* ── Reset for WordPress ── */
  .banana-export-section *,
  .banana-export-section *::before,
  .banana-export-section *::after { box-sizing: border-box; margin: 0; padding: 0; }

  /* ── Section ── */
  .banana-export-section {
    --banana-deep:    #D4A017;
    --banana-mid:     #F2C94C;
    --banana-light:   #FDEDA2;
    --banana-pale:    #FFF9E6;
    --banana-cream:   #FFFEF5;
    --leaf-dark:      #2D6A2E;
    --leaf-mid:       #4A8C3F;
    --text-dark:      #1E1A0F;
    --text-body:      #5C5030;
    --overlay-bg:     rgba(30, 26, 15, .55);

    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
    background: var(--banana-cream);
    padding: 60px 24px;
    position: relative;
    overflow: hidden;
  }

  /* subtle pattern bg */
  .banana-export-section::before {
    content: '';
    position: absolute; inset: 0;
    background:
      radial-gradient(circle at 10% 80%, rgba(242,201,76,.14) 0%, transparent 50%),
      radial-gradient(circle at 90% 20%, rgba(212,160,23,.1) 0%, transparent 45%);
    pointer-events: none;
  }

  .banana-export-inner {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 56px;
    position: relative;
    z-index: 1;
  }

  /* ── Image Card ── */
  .banana-img-wrap {
    flex: 0 0 48%;
    position: relative;
  }

  .banana-img-wrap img {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 18px;
    display: block;
    box-shadow:
      0 20px 50px rgba(212,160,23,.22),
      0 6px 16px rgba(0,0,0,.08);
    transition: transform .45s cubic-bezier(.23,1,.32,1), box-shadow .45s ease;
  }

  .banana-img-wrap:hover img {
    transform: translateY(-4px) scale(1.01);
    box-shadow:
      0 28px 60px rgba(212,160,23,.28),
      0 8px 20px rgba(0,0,0,.1);
  }

  /* decorative corner accent */
  .banana-img-wrap::after {
    content: '';
    position: absolute;
    bottom: -12px; right: -12px;
    width: 90px; height: 90px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--banana-light), var(--banana-mid));
    z-index: -1;
    opacity: .6;
  }

  /* ── Content ── */
  .banana-content { flex: 1; }

  .banana-tag {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--leaf-dark);
    margin-bottom: 14px;
    position: relative;
    padding-left: 28px;
  }

  .banana-tag::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 20px; height: 3px;
    border-radius: 2px;
    background: var(--leaf-dark);
  }

  .banana-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 900;
    font-size: clamp(32px, 4vw, 50px);
    line-height: 1.12;
    color: var(--text-dark);
    margin-bottom: 20px;
  }

  .banana-desc {
    font-size: 17px;
    line-height: 1.72;
    color: var(--text-body);
    margin-bottom: 28px;
    max-width: 520px;
  }

  /* ── Badges ── */
  .banana-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 34px;
  }

  .banana-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--banana-pale);
    border: 1.5px solid var(--banana-mid);
    padding: 9px 18px;
    border-radius: 50px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text-dark);
    transition: background .25s, border-color .25s;
  }

  .banana-badge:hover {
    background: #fef3c7;
    border-color: var(--banana-deep);
  }

  .banana-badge svg {
    flex-shrink: 0;
    color: var(--leaf-dark);
  }

  /* ── CTA Button ── */
  .banana-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 38px;
    background: linear-gradient(135deg, var(--banana-mid), var(--banana-deep));
    color: var(--text-dark);
    font-family: 'Source Sans 3', sans-serif;
    font-size: 17px;
    font-weight: 700;
    border: none;
    border-radius: 56px;
    cursor: pointer;
    box-shadow: 0 8px 28px rgba(212,160,23,.35);
    transition: transform .3s cubic-bezier(.23,1,.32,1), box-shadow .3s ease;
    letter-spacing: .3px;
  }

  .banana-cta:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 14px 36px rgba(212,160,23,.45);
  }

  .banana-cta:active { transform: scale(.98); }

  .banana-cta svg { transition: transform .3s; }
  .banana-cta:hover svg { transform: translateX(3px); }

  /* ── Modal Overlay ── */
  .banana-modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s ease;
    padding: 20px;
  }

  .banana-modal-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  /* ── Modal Box ── */
  .banana-modal {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 32px 80px rgba(0,0,0,.25);
    transform: translateY(30px) scale(.96);
    transition: transform .4s cubic-bezier(.23,1,.32,1);
    position: relative;
  }

  .banana-modal-overlay.active .banana-modal {
    transform: translateY(0) scale(1);
  }

  .banana-modal-header {
    background: linear-gradient(135deg, var(--banana-mid), #c49000);
    padding: 28px 32px 24px;
    border-radius: 20px 20px 0 0;
    position: relative;
  }

  .banana-modal-header h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 24px;
    font-weight: 800;
    color: var(--text-dark);
    margin: 0;
  }

  .banana-modal-header p {
    font-size: 14px;
    color: rgba(30,26,15,.75);
    margin-top: 4px;
  }

  .banana-close {
    position: absolute;
    top: 16px; right: 16px;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,.1);
    color: var(--text-dark);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .25s;
  }

  .banana-close:hover { background: rgba(0,0,0,.18); }

  .banana-modal-body {
    padding: 28px 32px 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .banana-field label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 6px;
    letter-spacing: .3px;
  }

  .banana-field label span { color: #d63031; }

  .banana-field input,
  .banana-field select,
  .banana-field textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid #e8e1c8;
    border-radius: 12px;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 15px;
    color: var(--text-dark);
    background: var(--banana-cream);
    outline: none;
    transition: border-color .25s, box-shadow .25s;
  }

  .banana-field input:focus,
  .banana-field select:focus,
  .banana-field textarea:focus {
    border-color: var(--banana-deep);
    box-shadow: 0 0 0 3px rgba(242,201,76,.2);
  }

  .banana-field textarea { resize: vertical; min-height: 80px; }

  .banana-row { display: flex; gap: 14px; }
  .banana-row > .banana-field { flex: 1; }

  .banana-submit {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, var(--leaf-mid), var(--leaf-dark));
    color: #fff;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    margin-top: 4px;
    transition: transform .25s, box-shadow .25s;
    box-shadow: 0 6px 20px rgba(45,106,46,.25);
  }

  .banana-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(45,106,46,.35);
  }

  /* ── Success state ── */
  .banana-success {
    display: none;
    text-align: center;
    padding: 48px 32px;
  }

  .banana-success.show { display: block; }
  .banana-success.show + .banana-modal-body { display: none; }

  .banana-success-icon {
    width: 72px; height: 72px;
    background: var(--banana-pale);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
  }

  .banana-success h4 {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    color: var(--text-dark);
    margin-bottom: 8px;
  }

  .banana-success p {
    font-size: 15px;
    color: var(--text-body);
    line-height: 1.6;
  }

  /* ── Responsive ── */
  @media (max-width: 768px) {
    .banana-export-section { padding: 40px 16px; }
    .banana-export-inner { flex-direction: column; gap: 32px; }
    .banana-img-wrap { flex: none; width: 100%; max-width: 420px; margin: 0 auto; }
    .banana-content { text-align: center; }
    .banana-desc { margin-left: auto; margin-right: auto; }
    .banana-badges { justify-content: center; }
    .banana-tag { padding-left: 0; }
    .banana-tag::before { display: none; }
    .banana-row { flex-direction: column; gap: 18px; }
    .banana-modal-body { padding: 24px 20px 28px; }
    .banana-modal-header { padding: 24px 20px 20px; }
  }


/* === papaya hero === */

  /* ── Reset for WordPress ── */
  .papaya-export-section *,
  .papaya-export-section *::before,
  .papaya-export-section *::after { box-sizing: border-box; margin: 0; padding: 0; }

  /* ── Section ── */
  .papaya-export-section {
    --papaya-deep:    #E65100;
    --papaya-mid:     #FF8F00;
    --papaya-light:   #FFCC80;
    --papaya-pale:    #FFF3E0;
    --papaya-cream:   #FFFBF5;
    --leaf-dark:      #33691E;
    --leaf-mid:       #558B2F;
    --text-dark:      #2E1A08;
    --text-body:      #5D4630;
    --overlay-bg:     rgba(46, 26, 8, .55);

    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
    background: var(--papaya-cream);
    padding: 60px 24px;
    position: relative;
    overflow: hidden;
  }

  /* subtle pattern bg */
  .papaya-export-section::before {
    content: '';
    position: absolute; inset: 0;
    background:
      radial-gradient(circle at 10% 80%, rgba(255,143,0,.12) 0%, transparent 50%),
      radial-gradient(circle at 90% 20%, rgba(230,81,0,.08) 0%, transparent 45%);
    pointer-events: none;
  }

  .papaya-export-inner {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 56px;
    position: relative;
    z-index: 1;
  }

  /* ── Image Card ── */
  .papaya-img-wrap {
    flex: 0 0 48%;
    position: relative;
  }

  .papaya-img-wrap img {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 18px;
    display: block;
    box-shadow:
      0 20px 50px rgba(230,81,0,.20),
      0 6px 16px rgba(0,0,0,.08);
    transition: transform .45s cubic-bezier(.23,1,.32,1), box-shadow .45s ease;
  }

  .papaya-img-wrap:hover img {
    transform: translateY(-4px) scale(1.01);
    box-shadow:
      0 28px 60px rgba(230,81,0,.26),
      0 8px 20px rgba(0,0,0,.1);
  }

  /* decorative corner accent */
  .papaya-img-wrap::after {
    content: '';
    position: absolute;
    bottom: -12px; right: -12px;
    width: 90px; height: 90px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--papaya-light), var(--papaya-mid));
    z-index: -1;
    opacity: .6;
  }

  /* ── Content ── */
  .papaya-content { flex: 1; }

  .papaya-tag {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--papaya-deep);
    margin-bottom: 14px;
    position: relative;
    padding-left: 28px;
  }

  .papaya-tag::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 20px; height: 3px;
    border-radius: 2px;
    background: var(--papaya-deep);
  }

  .papaya-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 900;
    font-size: clamp(32px, 4vw, 50px);
    line-height: 1.12;
    color: var(--text-dark);
    margin-bottom: 20px;
  }

  .papaya-desc {
    font-size: 17px;
    line-height: 1.72;
    color: var(--text-body);
    margin-bottom: 28px;
    max-width: 520px;
  }

  /* ── Badges ── */
  .papaya-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 34px;
  }

  .papaya-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--papaya-pale);
    border: 1.5px solid var(--papaya-light);
    padding: 9px 18px;
    border-radius: 50px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text-dark);
    transition: background .25s, border-color .25s;
  }

  .papaya-badge:hover {
    background: #FFE0B2;
    border-color: var(--papaya-mid);
  }

  .papaya-badge svg {
    flex-shrink: 0;
    color: var(--leaf-dark);
  }

  /* ── CTA Button ── */
  .papaya-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 38px;
    background: linear-gradient(135deg, var(--papaya-mid), var(--papaya-deep));
    color: #fff;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 17px;
    font-weight: 700;
    border: none;
    border-radius: 56px;
    cursor: pointer;
    box-shadow: 0 8px 28px rgba(230,81,0,.32);
    transition: transform .3s cubic-bezier(.23,1,.32,1), box-shadow .3s ease;
    letter-spacing: .3px;
  }

  .papaya-cta:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 14px 36px rgba(230,81,0,.42);
  }

  .papaya-cta:active { transform: scale(.98); }

  .papaya-cta svg { transition: transform .3s; }
  .papaya-cta:hover svg { transform: translateX(3px); }

  /* ── Modal Overlay ── */
  .papaya-modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s ease;
    padding: 20px;
  }

  .papaya-modal-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  /* ── Modal Box ── */
  .papaya-modal {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 32px 80px rgba(0,0,0,.25);
    transform: translateY(30px) scale(.96);
    transition: transform .4s cubic-bezier(.23,1,.32,1);
    position: relative;
  }

  .papaya-modal-overlay.active .papaya-modal {
    transform: translateY(0) scale(1);
  }

  .papaya-modal-header {
    background: linear-gradient(135deg, var(--papaya-mid), var(--papaya-deep));
    padding: 28px 32px 24px;
    border-radius: 20px 20px 0 0;
    position: relative;
  }

  .papaya-modal-header h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    margin: 0;
  }

  .papaya-modal-header p {
    font-size: 14px;
    color: rgba(255,255,255,.85);
    margin-top: 4px;
  }

  .papaya-close {
    position: absolute;
    top: 16px; right: 16px;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.2);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .25s;
  }

  .papaya-close:hover { background: rgba(255,255,255,.35); }

  .papaya-modal-body {
    padding: 28px 32px 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .papaya-field label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 6px;
    letter-spacing: .3px;
  }

  .papaya-field label span { color: #d63031; }

  .papaya-field input,
  .papaya-field select,
  .papaya-field textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid #e8d8c4;
    border-radius: 12px;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 15px;
    color: var(--text-dark);
    background: var(--papaya-cream);
    outline: none;
    transition: border-color .25s, box-shadow .25s;
  }

  .papaya-field input:focus,
  .papaya-field select:focus,
  .papaya-field textarea:focus {
    border-color: var(--papaya-mid);
    box-shadow: 0 0 0 3px rgba(255,143,0,.16);
  }

  .papaya-field textarea { resize: vertical; min-height: 80px; }

  .papaya-row { display: flex; gap: 14px; }
  .papaya-row > .papaya-field { flex: 1; }

  .papaya-submit {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, var(--leaf-mid), var(--leaf-dark));
    color: #fff;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    margin-top: 4px;
    transition: transform .25s, box-shadow .25s;
    box-shadow: 0 6px 20px rgba(51,105,30,.25);
  }

  .papaya-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(51,105,30,.35);
  }

  /* ── Success state ── */
  .papaya-success {
    display: none;
    text-align: center;
    padding: 48px 32px;
  }

  .papaya-success.show { display: block; }
  .papaya-success.show + .papaya-modal-body { display: none; }

  .papaya-success-icon {
    width: 72px; height: 72px;
    background: var(--papaya-pale);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
  }

  .papaya-success h4 {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    color: var(--text-dark);
    margin-bottom: 8px;
  }

  .papaya-success p {
    font-size: 15px;
    color: var(--text-body);
    line-height: 1.6;
  }

  /* ── Responsive ── */
  @media (max-width: 768px) {
    .papaya-export-section { padding: 40px 16px; }
    .papaya-export-inner { flex-direction: column; gap: 32px; }
    .papaya-img-wrap { flex: none; width: 100%; max-width: 420px; margin: 0 auto; }
    .papaya-content { text-align: center; }
    .papaya-desc { margin-left: auto; margin-right: auto; }
    .papaya-badges { justify-content: center; }
    .papaya-tag { padding-left: 0; }
    .papaya-tag::before { display: none; }
    .papaya-row { flex-direction: column; gap: 18px; }
    .papaya-modal-body { padding: 24px 20px 28px; }
    .papaya-modal-header { padding: 24px 20px 20px; }
  }


/* === onion hero === */

  /* ── Reset for WordPress ── */
  .onion-export-section *,
  .onion-export-section *::before,
  .onion-export-section *::after { box-sizing: border-box; margin: 0; padding: 0; }

  /* ── Section ── */
  .onion-export-section {
    --onion-deep:     #7B1FA2;
    --onion-mid:      #AB47BC;
    --onion-light:    #CE93D8;
    --onion-pale:     #F3E5F5;
    --onion-cream:    #FBF6FC;
    --earth-dark:     #4E342E;
    --earth-mid:      #6D4C41;
    --text-dark:      #1A0E20;
    --text-body:      #4A3856;
    --overlay-bg:     rgba(26, 14, 32, .55);

    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
    background: var(--onion-cream);
    padding: 60px 24px;
    position: relative;
    overflow: hidden;
  }

  /* subtle pattern bg */
  .onion-export-section::before {
    content: '';
    position: absolute; inset: 0;
    background:
      radial-gradient(circle at 10% 80%, rgba(171,71,188,.10) 0%, transparent 50%),
      radial-gradient(circle at 90% 20%, rgba(123,31,162,.07) 0%, transparent 45%);
    pointer-events: none;
  }

  .onion-export-inner {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 56px;
    position: relative;
    z-index: 1;
  }

  /* ── Image Card ── */
  .onion-img-wrap {
    flex: 0 0 48%;
    position: relative;
  }

  .onion-img-wrap img {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 18px;
    display: block;
    box-shadow:
      0 20px 50px rgba(123,31,162,.18),
      0 6px 16px rgba(0,0,0,.08);
    transition: transform .45s cubic-bezier(.23,1,.32,1), box-shadow .45s ease;
  }

  .onion-img-wrap:hover img {
    transform: translateY(-4px) scale(1.01);
    box-shadow:
      0 28px 60px rgba(123,31,162,.24),
      0 8px 20px rgba(0,0,0,.1);
  }

  /* decorative corner accent */
  .onion-img-wrap::after {
    content: '';
    position: absolute;
    bottom: -12px; right: -12px;
    width: 90px; height: 90px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--onion-light), var(--onion-mid));
    z-index: -1;
    opacity: .6;
  }

  /* ── Content ── */
  .onion-content { flex: 1; }

  .onion-tag {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--onion-deep);
    margin-bottom: 14px;
    position: relative;
    padding-left: 28px;
  }

  .onion-tag::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 20px; height: 3px;
    border-radius: 2px;
    background: var(--onion-deep);
  }

  .onion-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 900;
    font-size: clamp(32px, 4vw, 50px);
    line-height: 1.12;
    color: var(--text-dark);
    margin-bottom: 20px;
  }

  .onion-desc {
    font-size: 17px;
    line-height: 1.72;
    color: var(--text-body);
    margin-bottom: 28px;
    max-width: 520px;
  }

  /* ── Badges ── */
  .onion-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 34px;
  }

  .onion-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--onion-pale);
    border: 1.5px solid var(--onion-light);
    padding: 9px 18px;
    border-radius: 50px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text-dark);
    transition: background .25s, border-color .25s;
  }

  .onion-badge:hover {
    background: #E1BEE7;
    border-color: var(--onion-mid);
  }

  .onion-badge svg {
    flex-shrink: 0;
    color: var(--onion-deep);
  }

  /* ── CTA Button ── */
  .onion-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 38px;
    background: linear-gradient(135deg, var(--onion-mid), var(--onion-deep));
    color: #fff;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 17px;
    font-weight: 700;
    border: none;
    border-radius: 56px;
    cursor: pointer;
    box-shadow: 0 8px 28px rgba(123,31,162,.30);
    transition: transform .3s cubic-bezier(.23,1,.32,1), box-shadow .3s ease;
    letter-spacing: .3px;
  }

  .onion-cta:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 14px 36px rgba(123,31,162,.40);
  }

  .onion-cta:active { transform: scale(.98); }

  .onion-cta svg { transition: transform .3s; }
  .onion-cta:hover svg { transform: translateX(3px); }

  /* ── Modal Overlay ── */
  .onion-modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s ease;
    padding: 20px;
  }

  .onion-modal-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  /* ── Modal Box ── */
  .onion-modal {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 32px 80px rgba(0,0,0,.25);
    transform: translateY(30px) scale(.96);
    transition: transform .4s cubic-bezier(.23,1,.32,1);
    position: relative;
  }

  .onion-modal-overlay.active .onion-modal {
    transform: translateY(0) scale(1);
  }

  .onion-modal-header {
    background: linear-gradient(135deg, var(--onion-mid), var(--onion-deep));
    padding: 28px 32px 24px;
    border-radius: 20px 20px 0 0;
    position: relative;
  }

  .onion-modal-header h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    margin: 0;
  }

  .onion-modal-header p {
    font-size: 14px;
    color: rgba(255,255,255,.85);
    margin-top: 4px;
  }

  .onion-close {
    position: absolute;
    top: 16px; right: 16px;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.2);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .25s;
  }

  .onion-close:hover { background: rgba(255,255,255,.35); }

  .onion-modal-body {
    padding: 28px 32px 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .onion-field label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 6px;
    letter-spacing: .3px;
  }

  .onion-field label span { color: #d63031; }

  .onion-field input,
  .onion-field select,
  .onion-field textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid #d7c4db;
    border-radius: 12px;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 15px;
    color: var(--text-dark);
    background: var(--onion-cream);
    outline: none;
    transition: border-color .25s, box-shadow .25s;
  }

  .onion-field input:focus,
  .onion-field select:focus,
  .onion-field textarea:focus {
    border-color: var(--onion-mid);
    box-shadow: 0 0 0 3px rgba(171,71,188,.15);
  }

  .onion-field textarea { resize: vertical; min-height: 80px; }

  .onion-row { display: flex; gap: 14px; }
  .onion-row > .onion-field { flex: 1; }

  .onion-submit {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, var(--earth-mid), var(--earth-dark));
    color: #fff;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    margin-top: 4px;
    transition: transform .25s, box-shadow .25s;
    box-shadow: 0 6px 20px rgba(78,52,46,.25);
  }

  .onion-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(78,52,46,.35);
  }

  /* ── Success state ── */
  .onion-success {
    display: none;
    text-align: center;
    padding: 48px 32px;
  }

  .onion-success.show { display: block; }
  .onion-success.show + .onion-modal-body { display: none; }

  .onion-success-icon {
    width: 72px; height: 72px;
    background: var(--onion-pale);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
  }

  .onion-success h4 {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    color: var(--text-dark);
    margin-bottom: 8px;
  }

  .onion-success p {
    font-size: 15px;
    color: var(--text-body);
    line-height: 1.6;
  }

  /* ── Responsive ── */
  @media (max-width: 768px) {
    .onion-export-section { padding: 40px 16px; }
    .onion-export-inner { flex-direction: column; gap: 32px; }
    .onion-img-wrap { flex: none; width: 100%; max-width: 420px; margin: 0 auto; }
    .onion-content { text-align: center; }
    .onion-desc { margin-left: auto; margin-right: auto; }
    .onion-badges { justify-content: center; }
    .onion-tag { padding-left: 0; }
    .onion-tag::before { display: none; }
    .onion-row { flex-direction: column; gap: 18px; }
    .onion-modal-body { padding: 24px 20px 28px; }
    .onion-modal-header { padding: 24px 20px 20px; }
  }


/* === fresh-g4-green-chilli hero === */

  /* ── Reset for WordPress ── */
  .chilli-export-section *,
  .chilli-export-section *::before,
  .chilli-export-section *::after { box-sizing: border-box; margin: 0; padding: 0; }

  /* ── Section ── */
  .chilli-export-section {
    --chilli-deep:    #2E7D32;
    --chilli-mid:     #4CAF50;
    --chilli-light:   #A5D6A7;
    --chilli-pale:    #E8F5E9;
    --chilli-cream:   #F6FBF6;
    --accent-red:     #C62828;
    --accent-red-lt:  #EF5350;
    --text-dark:      #1B2E1B;
    --text-body:      #3E5240;
    --overlay-bg:     rgba(27, 46, 27, .55);

    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
    background: var(--chilli-cream);
    padding: 60px 24px;
    position: relative;
    overflow: hidden;
  }

  /* subtle pattern bg */
  .chilli-export-section::before {
    content: '';
    position: absolute; inset: 0;
    background:
      radial-gradient(circle at 10% 80%, rgba(76,175,80,.12) 0%, transparent 50%),
      radial-gradient(circle at 90% 20%, rgba(46,125,50,.08) 0%, transparent 45%);
    pointer-events: none;
  }

  .chilli-export-inner {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 56px;
    position: relative;
    z-index: 1;
  }

  /* ── Image Card ── */
  .chilli-img-wrap {
    flex: 0 0 48%;
    position: relative;
  }

  .chilli-img-wrap img {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 18px;
    display: block;
    box-shadow:
      0 20px 50px rgba(46,125,50,.22),
      0 6px 16px rgba(0,0,0,.08);
    transition: transform .45s cubic-bezier(.23,1,.32,1), box-shadow .45s ease;
  }

  .chilli-img-wrap:hover img {
    transform: translateY(-4px) scale(1.01);
    box-shadow:
      0 28px 60px rgba(46,125,50,.28),
      0 8px 20px rgba(0,0,0,.1);
  }

  /* decorative corner accent */
  .chilli-img-wrap::after {
    content: '';
    position: absolute;
    bottom: -12px; right: -12px;
    width: 90px; height: 90px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--chilli-light), var(--chilli-mid));
    z-index: -1;
    opacity: .6;
  }

  /* ── Content ── */
  .chilli-content { flex: 1; }

  .chilli-tag {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--accent-red);
    margin-bottom: 14px;
    position: relative;
    padding-left: 28px;
  }

  .chilli-tag::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 20px; height: 3px;
    border-radius: 2px;
    background: var(--accent-red);
  }

  .chilli-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 900;
    font-size: clamp(32px, 4vw, 50px);
    line-height: 1.12;
    color: var(--text-dark);
    margin-bottom: 20px;
  }

  .chilli-desc {
    font-size: 17px;
    line-height: 1.72;
    color: var(--text-body);
    margin-bottom: 28px;
    max-width: 520px;
  }

  /* ── Badges ── */
  .chilli-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 34px;
  }

  .chilli-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--chilli-pale);
    border: 1.5px solid var(--chilli-light);
    padding: 9px 18px;
    border-radius: 50px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text-dark);
    transition: background .25s, border-color .25s;
  }

  .chilli-badge:hover {
    background: #C8E6C9;
    border-color: var(--chilli-mid);
  }

  .chilli-badge svg {
    flex-shrink: 0;
    color: var(--chilli-deep);
  }

  /* ── CTA Button ── */
  .chilli-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 38px;
    background: linear-gradient(135deg, var(--chilli-mid), var(--chilli-deep));
    color: #fff;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 17px;
    font-weight: 700;
    border: none;
    border-radius: 56px;
    cursor: pointer;
    box-shadow: 0 8px 28px rgba(46,125,50,.35);
    transition: transform .3s cubic-bezier(.23,1,.32,1), box-shadow .3s ease;
    letter-spacing: .3px;
  }

  .chilli-cta:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 14px 36px rgba(46,125,50,.45);
  }

  .chilli-cta:active { transform: scale(.98); }

  .chilli-cta svg { transition: transform .3s; }
  .chilli-cta:hover svg { transform: translateX(3px); }

  /* ── Modal Overlay ── */
  .chilli-modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s ease;
    padding: 20px;
  }

  .chilli-modal-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  /* ── Modal Box ── */
  .chilli-modal {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 32px 80px rgba(0,0,0,.25);
    transform: translateY(30px) scale(.96);
    transition: transform .4s cubic-bezier(.23,1,.32,1);
    position: relative;
  }

  .chilli-modal-overlay.active .chilli-modal {
    transform: translateY(0) scale(1);
  }

  .chilli-modal-header {
    background: linear-gradient(135deg, var(--chilli-mid), var(--chilli-deep));
    padding: 28px 32px 24px;
    border-radius: 20px 20px 0 0;
    position: relative;
  }

  .chilli-modal-header h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    margin: 0;
  }

  .chilli-modal-header p {
    font-size: 14px;
    color: rgba(255,255,255,.85);
    margin-top: 4px;
  }

  .chilli-close {
    position: absolute;
    top: 16px; right: 16px;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.2);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .25s;
  }

  .chilli-close:hover { background: rgba(255,255,255,.35); }

  .chilli-modal-body {
    padding: 28px 32px 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .chilli-field label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 6px;
    letter-spacing: .3px;
  }

  .chilli-field label span { color: #d63031; }

  .chilli-field input,
  .chilli-field select,
  .chilli-field textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid #c8e0c9;
    border-radius: 12px;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 15px;
    color: var(--text-dark);
    background: var(--chilli-cream);
    outline: none;
    transition: border-color .25s, box-shadow .25s;
  }

  .chilli-field input:focus,
  .chilli-field select:focus,
  .chilli-field textarea:focus {
    border-color: var(--chilli-mid);
    box-shadow: 0 0 0 3px rgba(76,175,80,.18);
  }

  .chilli-field textarea { resize: vertical; min-height: 80px; }

  .chilli-row { display: flex; gap: 14px; }
  .chilli-row > .chilli-field { flex: 1; }

  .chilli-submit {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, var(--accent-red-lt), var(--accent-red));
    color: #fff;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    margin-top: 4px;
    transition: transform .25s, box-shadow .25s;
    box-shadow: 0 6px 20px rgba(198,40,40,.25);
  }

  .chilli-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(198,40,40,.35);
  }

  /* ── Success state ── */
  .chilli-success {
    display: none;
    text-align: center;
    padding: 48px 32px;
  }

  .chilli-success.show { display: block; }
  .chilli-success.show + .chilli-modal-body { display: none; }

  .chilli-success-icon {
    width: 72px; height: 72px;
    background: var(--chilli-pale);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
  }

  .chilli-success h4 {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    color: var(--text-dark);
    margin-bottom: 8px;
  }

  .chilli-success p {
    font-size: 15px;
    color: var(--text-body);
    line-height: 1.6;
  }

  /* ── Responsive ── */
  @media (max-width: 768px) {
    .chilli-export-section { padding: 40px 16px; }
    .chilli-export-inner { flex-direction: column; gap: 32px; }
    .chilli-img-wrap { flex: none; width: 100%; max-width: 420px; margin: 0 auto; }
    .chilli-content { text-align: center; }
    .chilli-desc { margin-left: auto; margin-right: auto; }
    .chilli-badges { justify-content: center; }
    .chilli-tag { padding-left: 0; }
    .chilli-tag::before { display: none; }
    .chilli-row { flex-direction: column; gap: 18px; }
    .chilli-modal-body { padding: 24px 20px 28px; }
    .chilli-modal-header { padding: 24px 20px 20px; }
  }


/* === mango hero === */

  /* ── Reset for WordPress ── */
  .mango-export-section *,
  .mango-export-section *::before,
  .mango-export-section *::after { box-sizing: border-box; margin: 0; padding: 0; }

  /* ── Section ── */
  .mango-export-section {
    --mango-deep:    #E8860C;
    --mango-mid:     #F5A623;
    --mango-light:   #FFD580;
    --mango-pale:    #FFF8ED;
    --mango-cream:   #FFFDF7;
    --leaf-dark:     #2D6A2E;
    --leaf-mid:      #4A8C3F;
    --text-dark:     #2B1D0E;
    --text-body:     #5C4A35;
    --overlay-bg:    rgba(43, 29, 14, .55);

    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
    background: var(--mango-cream);
    padding: 60px 24px;
    position: relative;
    overflow: hidden;
  }

  /* subtle pattern bg */
  .mango-export-section::before {
    content: '';
    position: absolute; inset: 0;
    background:
      radial-gradient(circle at 10% 80%, rgba(245,166,35,.12) 0%, transparent 50%),
      radial-gradient(circle at 90% 20%, rgba(232,134,12,.08) 0%, transparent 45%);
    pointer-events: none;
  }

  .mango-export-inner {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 56px;
    position: relative;
    z-index: 1;
  }

  /* ── Image Card ── */
  .mango-img-wrap {
    flex: 0 0 48%;
    position: relative;
  }

  .mango-img-wrap img {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 18px;
    display: block;
    box-shadow:
      0 20px 50px rgba(232,134,12,.22),
      0 6px 16px rgba(0,0,0,.08);
    transition: transform .45s cubic-bezier(.23,1,.32,1), box-shadow .45s ease;
  }

  .mango-img-wrap:hover img {
    transform: translateY(-4px) scale(1.01);
    box-shadow:
      0 28px 60px rgba(232,134,12,.28),
      0 8px 20px rgba(0,0,0,.1);
  }

  /* decorative corner accent */
  .mango-img-wrap::after {
    content: '';
    position: absolute;
    bottom: -12px; right: -12px;
    width: 90px; height: 90px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--mango-light), var(--mango-mid));
    z-index: -1;
    opacity: .6;
  }

  /* ── Content ── */
  .mango-content { flex: 1; }

  .mango-tag {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--mango-deep);
    margin-bottom: 14px;
    position: relative;
    padding-left: 28px;
  }

  .mango-tag::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 20px; height: 3px;
    border-radius: 2px;
    background: var(--mango-deep);
  }

  .mango-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 900;
    font-size: clamp(32px, 4vw, 50px);
    line-height: 1.12;
    color: var(--text-dark);
    margin-bottom: 20px;
  }

  .mango-desc {
    font-size: 17px;
    line-height: 1.72;
    color: var(--text-body);
    margin-bottom: 28px;
    max-width: 520px;
  }

  /* ── Badges ── */
  .mango-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 34px;
  }

  .mango-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--mango-pale);
    border: 1.5px solid var(--mango-light);
    padding: 9px 18px;
    border-radius: 50px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text-dark);
    transition: background .25s, border-color .25s;
  }

  .mango-badge:hover {
    background: var(--mango-light);
    border-color: var(--mango-mid);
  }

  .mango-badge svg {
    flex-shrink: 0;
    color: var(--leaf-dark);
  }

  /* ── CTA Button ── */
  .mango-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 38px;
    background: linear-gradient(135deg, var(--mango-mid), var(--mango-deep));
    color: #fff;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 17px;
    font-weight: 700;
    border: none;
    border-radius: 56px;
    cursor: pointer;
    box-shadow: 0 8px 28px rgba(232,134,12,.35);
    transition: transform .3s cubic-bezier(.23,1,.32,1), box-shadow .3s ease;
    letter-spacing: .3px;
  }

  .mango-cta:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 14px 36px rgba(232,134,12,.45);
  }

  .mango-cta:active { transform: scale(.98); }

  .mango-cta svg {
    transition: transform .3s;
  }
  .mango-cta:hover svg { transform: translateX(3px); }

  /* ── Modal Overlay ── */
  .mango-modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s ease;
    padding: 20px;
  }

  .mango-modal-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  /* ── Modal Box ── */
  .mango-modal {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 32px 80px rgba(0,0,0,.25);
    transform: translateY(30px) scale(.96);
    transition: transform .4s cubic-bezier(.23,1,.32,1);
    position: relative;
  }

  .mango-modal-overlay.active .mango-modal {
    transform: translateY(0) scale(1);
  }

  .mango-modal-header {
    background: linear-gradient(135deg, var(--mango-mid), var(--mango-deep));
    padding: 28px 32px 24px;
    border-radius: 20px 20px 0 0;
    position: relative;
  }

  .mango-modal-header h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    margin: 0;
  }

  .mango-modal-header p {
    font-size: 14px;
    color: rgba(255,255,255,.85);
    margin-top: 4px;
  }

  .mango-close {
    position: absolute;
    top: 16px; right: 16px;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.2);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .25s;
  }

  .mango-close:hover { background: rgba(255,255,255,.35); }

  .mango-modal-body {
    padding: 28px 32px 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .mango-field label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 6px;
    letter-spacing: .3px;
  }

  .mango-field label span { color: #d63031; }

  .mango-field input,
  .mango-field select,
  .mango-field textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid #e5ddd4;
    border-radius: 12px;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 15px;
    color: var(--text-dark);
    background: var(--mango-cream);
    outline: none;
    transition: border-color .25s, box-shadow .25s;
  }

  .mango-field input:focus,
  .mango-field select:focus,
  .mango-field textarea:focus {
    border-color: var(--mango-mid);
    box-shadow: 0 0 0 3px rgba(245,166,35,.15);
  }

  .mango-field textarea { resize: vertical; min-height: 80px; }

  .mango-row { display: flex; gap: 14px; }
  .mango-row > .mango-field { flex: 1; }

  .mango-submit {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, var(--leaf-mid), var(--leaf-dark));
    color: #fff;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    margin-top: 4px;
    transition: transform .25s, box-shadow .25s;
    box-shadow: 0 6px 20px rgba(45,106,46,.25);
  }

  .mango-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(45,106,46,.35);
  }

  /* ── Success state ── */
  .mango-success {
    display: none;
    text-align: center;
    padding: 48px 32px;
  }

  .mango-success.show { display: block; }
  .mango-success.show + .mango-modal-body { display: none; }

  .mango-success-icon {
    width: 72px; height: 72px;
    background: var(--mango-pale);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
  }

  .mango-success h4 {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    color: var(--text-dark);
    margin-bottom: 8px;
  }

  .mango-success p {
    font-size: 15px;
    color: var(--text-body);
    line-height: 1.6;
  }

  /* ── Responsive ── */
  @media (max-width: 768px) {
    .mango-export-section { padding: 40px 16px; }
    .mango-export-inner { flex-direction: column; gap: 32px; }
    .mango-img-wrap { flex: none; width: 100%; max-width: 420px; margin: 0 auto; }
    .mango-content { text-align: center; }
    .mango-desc { margin-left: auto; margin-right: auto; }
    .mango-badges { justify-content: center; }
    .mango-tag { padding-left: 0; }
    .mango-tag::before { display: none; }
    .mango-row { flex-direction: column; gap: 18px; }
    .mango-modal-body { padding: 24px 20px 28px; }
    .mango-modal-header { padding: 24px 20px 20px; }
  }


/* === export process === */


/* SECTION */

.lge-export-process{
padding:120px 20px;
background:#f7faf7;
font-family:Arial, sans-serif;
}

.lge-process-container{
max-width:1200px;
margin:auto;
}

/* HEADER */

.lge-process-header{
text-align:center;
margin-bottom:70px;
}

.lge-process-tag{
color:#0f7a2f;
letter-spacing:1px;
font-weight:600;
font-size:14px;
}

.lge-process-title{
font-size:44px;
margin:15px 0;
}

.lge-process-desc{
color:#666;
max-width:650px;
margin:auto;
line-height:1.7;
}

/* TIMELINE */

.lge-process-timeline{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

/* STEP */

.lge-process-step{
background:#fff;
padding:30px;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.06);
transition:.4s;
position:relative;
}

.lge-process-step:hover{
transform:translateY(-8px);
box-shadow:0 15px 40px rgba(0,0,0,0.12);
}

/* STEP NUMBER */

.lge-step-number{
font-size:26px;
font-weight:700;
color:#118b42;
margin-bottom:10px;
}

/* TEXT */

.lge-process-step h4{
margin-bottom:10px;
}

.lge-process-step p{
color:#666;
font-size:14px;
line-height:1.6;
}
/* CARD ANIMATION INITIAL STATE */

.lge-process-step{
opacity:0;
transform:translateY(40px);
transition:all 0.7s ease;
}

/* WHEN VISIBLE */

.lge-process-step.active{
opacity:1;
transform:translateY(0);
}

/* FADE OUT WHEN LEAVING */

.lge-process-step.out{
opacity:0;
transform:translateY(40px);
}

/* MOBILE */

@media(max-width:900px){

.lge-process-timeline{
grid-template-columns:1fr;
}

.lge-process-title{
font-size:32px;
}

}


/* === packaging banana === */

  .bp-section *,
  .bp-section *::before,
  .bp-section *::after { box-sizing: border-box; margin: 0; padding: 0; }

  .bp-section {
    --b-deep: #D4A017;
    --b-mid: #F2C94C;
    --b-pale: #FFF9E6;
    --b-cream: #FFFEF5;
    --txt: #1E1A0F;
    --txt2: #5C5030;
    font-family: 'Source Sans 3', sans-serif;
    background: var(--b-cream);
    padding: 60px 24px;
  }

  .bp-wrap {
    max-width: 820px;
    margin: 0 auto;
  }

  .bp-heading {
    font-family: 'Playfair Display', serif;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800;
    color: var(--txt);
    margin-bottom: 8px;
    line-height: 1.25;
  }

  .bp-heading span { color: var(--b-deep); }

  .bp-sub {
    font-size: 16px;
    color: var(--txt2);
    margin-bottom: 40px;
    line-height: 1.6;
  }

  .bp-sub strong { color: var(--b-deep); }

  .bp-item {
    padding: 20px 0;
    border-bottom: 1px solid #f0e8d0;
  }

  .bp-item:first-child { border-top: 1px solid #f0e8d0; }

  .bp-item-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--txt);
    margin-bottom: 6px;
  }

  .bp-item-title .bp-num {
    color: var(--b-deep);
    margin-right: 6px;
  }

  .bp-item p, .bp-item li {
    font-size: 15px;
    line-height: 1.7;
    color: var(--txt2);
  }

  .bp-item strong { color: var(--txt); }

  .bp-vals {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
  }

  .bp-val {
    background: var(--b-pale);
    border: 1px solid #f0e4bf;
    padding: 4px 14px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--txt);
  }

  .bp-reefer-list {
    list-style: none;
    margin-top: 6px;
  }

  .bp-reefer-list li {
    padding: 3px 0;
    font-size: 15px;
    color: var(--txt2);
  }

  .bp-reefer-list li em { font-style: italic; }

  /* ── Container Stuffing ── */
  .bp-container-section { margin-top: 48px; }

  .bp-container-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 800;
    color: var(--txt);
    margin-bottom: 28px;
    line-height: 1.3;
  }

  .bp-container-title span { color: var(--b-deep); }

  .bp-box-group { margin-bottom: 28px; }

  .bp-box-group-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--txt);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--b-mid);
    display: inline-block;
  }

  .bp-box-list {
    list-style: none;
  }

  .bp-box-list li {
    font-size: 15px;
    line-height: 1.7;
    color: var(--txt2);
    padding: 4px 0 4px 16px;
    position: relative;
  }

  .bp-box-list li::before {
    content: '–';
    position: absolute;
    left: 0;
    color: var(--b-deep);
    font-weight: 700;
  }

  .bp-box-list li strong { color: var(--txt); }

  @media (max-width: 600px) {
    .bp-section { padding: 40px 16px; }
  }


/* === related products (section variant) === */
.lge-products-section {
  padding: 100px 20px;
  background: #f7faf8;
  font-family: Arial, sans-serif;
}
.lge-products-container { max-width: 1200px; margin: 0 auto; }
.lge-products-header { text-align: center; max-width: 700px; margin: 0 auto 50px; }
.lge-products-tag { color: #0f7a2f; font-size: 14px; font-weight: 700; letter-spacing: 1px; margin: 0 0 10px; }
.lge-products-title { font-size: 36px; margin: 0 0 14px; color: #0f172a; font-weight: 700; text-transform: none; }
.lge-products-desc { color: #666; line-height: 1.7; margin: 0; }
.lge-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
}
.lge-product-card {
  background: #fff;
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
  text-align: center;
  display: flex;
  flex-direction: column;
  transition: transform .35s ease, box-shadow .35s ease;
}
.lge-product-card:hover { transform: translateY(-8px); box-shadow: 0 18px 40px rgba(0,0,0,.1); }
.lge-product-image { height: 160px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.lge-product-image img { max-height: 140px; width: auto; max-width: 100%; object-fit: contain; }
.lge-product-card h3 { font-size: 20px; margin: 0 0 10px; color: #0f172a; text-transform: none; }
.lge-product-card p { font-size: 14px; color: #666; line-height: 1.6; flex: 1; margin: 0 0 16px; }
.lge-product-card a {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: auto; align-self: center;
  padding: 10px 18px; background: var(--lilvex-yellow); color: var(--lilvex-charcoal-dark); font-weight: 700; text-decoration: none;
  border-radius: 8px; font-size: 13px; font-weight: 700;
}
.lge-product-card a:hover { background: var(--lilvex-yellow-dark); color: var(--lilvex-black); }

/* === related products (showcase variant) === */
.lge-products-showcase {
  padding: 100px 20px;
  background: #f7faf8;
  font-family: "Source Sans 3", Arial, sans-serif;
}
.lge-products-showcase__container { max-width: 1200px; margin: 0 auto; }
.lge-products-showcase__header { text-align: center; max-width: 720px; margin: 0 auto 50px; }
.lge-products-showcase__tag { color: #0f7a2f; font-size: 14px; font-weight: 700; letter-spacing: 1px; margin: 0 0 10px; }
.lge-products-showcase__title { font-size: 36px; margin: 0 0 14px; color: #0f172a; font-weight: 700; text-transform: none; font-family: "Playfair Display", Georgia, serif; }
.lge-products-showcase__desc { color: #666; line-height: 1.7; margin: 0; }
.lge-products-showcase__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
}
.lge-products-showcase__card {
  background: #fff;
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
  text-align: center;
  display: flex;
  flex-direction: column;
  transition: transform .35s ease;
}
.lge-products-showcase__card:hover { transform: translateY(-8px); }
.lge-products-showcase__image-box { height: 160px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.lge-products-showcase__image { max-height: 140px; width: auto; max-width: 100%; object-fit: contain; }
.lge-products-showcase__card-title { font-size: 20px; margin: 0 0 10px; color: #0f172a; text-transform: none; }
.lge-products-showcase__card-text { font-size: 14px; color: #666; line-height: 1.6; flex: 1; margin: 0 0 16px; }
.lge-products-showcase__button {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: auto; align-self: center;
  padding: 10px 18px; background: var(--lilvex-yellow); color: var(--lilvex-charcoal-dark) !important; font-weight: 700; text-decoration: none;
  border-radius: 8px; font-size: 13px; font-weight: 700;
}
.lge-products-showcase__button:hover { background: var(--lilvex-yellow-dark); color: var(--lilvex-black); }

/* CTA uses shared inquiry opener */
.product-export-section .product-cta,
.banana-cta, .papaya-cta, .onion-cta, .chilli-cta, .mango-cta {
  cursor: pointer;
  border: none;
}

@media (max-width: 900px) {
  .lge-process-timeline { grid-template-columns: 1fr !important; }
  .lge-products-title, .lge-products-showcase__title { font-size: 28px; }
}

/* Export process visible by default (no JS intersection required for content) */
.lge-process-step {
  opacity: 1 !important;
  transform: none !important;
}