/* =========================================================
 * ALMARA Affiliate — Mobile & Tablet
 * almara-affiliate-mobile.css v3.0.0
 *
 * KEY FIX: Elementor uses flex: 0 0 50% (flex-basis) not width.
 * Must override with flex: 0 0 100% AND flex-wrap: wrap on container.
 * ========================================================= */

/* =========================================================
 * TABLET  ≤ 1024px
 * ========================================================= */
@media screen and (max-width: 1024px) {

  /* Section padding */
  body:has(#alm-affiliate-hero) #alm-affiliate-hero,
  body:has(#alm-affiliate-hero) #alm-affiliate-partner-bar,
  body:has(#alm-affiliate-hero) #alm-affiliate-why,
  body:has(#alm-affiliate-hero) #alm-affiliate-journey,
  body:has(#alm-affiliate-hero) #alm-affiliate-depth-bar,
  body:has(#alm-affiliate-hero) #alm-affiliate-tiers,
  body:has(#alm-affiliate-hero) #alm-affiliate-compare,
  body:has(#alm-affiliate-hero) #alm-affiliate-how,
  body:has(#alm-affiliate-hero) #alm-affiliate-stats,
  body:has(#alm-affiliate-hero) #alm-affiliate-dashboard,
  body:has(#alm-affiliate-hero) #alm-affiliate-quote,
  body:has(#alm-affiliate-hero) #alm-affiliate-faq,
  body:has(#alm-affiliate-hero) #alm-affiliate-final-cta {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  /* Elementor e-con padding-inline reset on tablet */
  body:has(#alm-affiliate-hero) #alm-affiliate-why .e-con-inner,
  body:has(#alm-affiliate-hero) #alm-affiliate-tiers .e-con-inner,
  body:has(#alm-affiliate-hero) #alm-affiliate-dashboard .e-con-inner {
    padding-inline: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  body:has(#alm-affiliate-hero) #alm-affiliate-tiers .e-con.e-child > .e-con-inner {
    padding: .75rem 1rem !important;
  }

  /* ── Tier cards: stack ── */
  body:has(#alm-affiliate-hero) #alm-affiliate-tiers .elementor-container {
    flex-wrap: wrap !important;
  }
  body:has(#alm-affiliate-hero) #alm-affiliate-tiers .elementor-col-33 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* ── Why: stack ── */
  body:has(#alm-affiliate-hero) #alm-affiliate-why .elementor-container {
    flex-wrap: wrap !important;
  }
  body:has(#alm-affiliate-hero) #alm-affiliate-why .elementor-col-50 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  body:has(#alm-affiliate-hero) #alm-affiliate-why .elementor-col-50:first-child img {
    max-height: 360px !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  /* ── Dashboard: stack ── */
  body:has(#alm-affiliate-hero) #alm-affiliate-dashboard .elementor-container {
    flex-wrap: wrap !important;
  }
  body:has(#alm-affiliate-hero) #alm-affiliate-dashboard .elementor-col-50 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* ── Steps: 2-column ── */
  body:has(#alm-affiliate-hero) #alm-affiliate-how .elementor-container {
    flex-wrap: wrap !important;
  }
  body:has(#alm-affiliate-hero) #alm-affiliate-how .elementor-col-25 {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
  }

  /* ── Stats: 2-column ── */
  body:has(#alm-affiliate-hero) #alm-affiliate-stats .elementor-container {
    flex-wrap: wrap !important;
  }
  body:has(#alm-affiliate-hero) #alm-affiliate-stats .elementor-col-25 {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
  }

  /* ── FAQ: 2-column ── */
  body:has(#alm-affiliate-hero) #alm-affiliate-faq .elementor-container {
    flex-wrap: wrap !important;
  }
  body:has(#alm-affiliate-hero) #alm-affiliate-faq .elementor-col-17 {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
  }

  /* ── Depth bar: hide arrows ── */
  body:has(#alm-affiliate-hero) #alm-affiliate-depth-bar .elementor-container {
    flex-wrap: wrap !important;
  }
  body:has(#alm-affiliate-hero) #alm-affiliate-depth-bar .elementor-col-20:nth-child(2),
  body:has(#alm-affiliate-hero) #alm-affiliate-depth-bar .elementor-col-20:nth-child(4) {
    display: none !important;
  }
  body:has(#alm-affiliate-hero) #alm-affiliate-depth-bar .elementor-col-20:nth-child(1),
  body:has(#alm-affiliate-hero) #alm-affiliate-depth-bar .elementor-col-20:nth-child(3),
  body:has(#alm-affiliate-hero) #alm-affiliate-depth-bar .elementor-col-20:nth-child(5) {
    width: 33.333% !important;
    max-width: 33.333% !important;
    flex: 0 0 33.333% !important;
    text-align: center !important;
  }
}

/* =========================================================
 * MOBILE  ≤ 767px
 * ========================================================= */
@media screen and (max-width: 767px) {

  /* ── Global padding ── */
  body:has(#alm-affiliate-hero) #alm-affiliate-hero,
  body:has(#alm-affiliate-hero) #alm-affiliate-partner-bar,
  body:has(#alm-affiliate-hero) #alm-affiliate-why,
  body:has(#alm-affiliate-hero) #alm-affiliate-journey,
  body:has(#alm-affiliate-hero) #alm-affiliate-depth-bar,
  body:has(#alm-affiliate-hero) #alm-affiliate-tiers,
  body:has(#alm-affiliate-hero) #alm-affiliate-compare,
  body:has(#alm-affiliate-hero) #alm-affiliate-how,
  body:has(#alm-affiliate-hero) #alm-affiliate-stats,
  body:has(#alm-affiliate-hero) #alm-affiliate-dashboard,
  body:has(#alm-affiliate-hero) #alm-affiliate-quote,
  body:has(#alm-affiliate-hero) #alm-affiliate-faq,
  body:has(#alm-affiliate-hero) #alm-affiliate-final-cta {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  /* ── ALL Elementor containers: allow wrap ── */
  body:has(#alm-affiliate-hero) .elementor-container {
    flex-wrap: wrap !important;
  }

  /* ── CRITICAL: Remove Elementor's generated padding-inline on e-con-inner ──
     Elementor sets padding-inline: 84px (or similar) via per-element CSS.
     On mobile this crushes content width to ~132px on a 360px screen.
     Override all e-con-inner within affiliate sections to remove this. ── */
  body:has(#alm-affiliate-hero) #alm-affiliate-hero .e-con-inner,
  body:has(#alm-affiliate-hero) #alm-affiliate-partner-bar .e-con-inner,
  body:has(#alm-affiliate-hero) #alm-affiliate-why .e-con-inner,
  body:has(#alm-affiliate-hero) #alm-affiliate-journey .e-con-inner,
  body:has(#alm-affiliate-hero) #alm-affiliate-depth-bar .e-con-inner,
  body:has(#alm-affiliate-hero) #alm-affiliate-tiers .e-con-inner,
  body:has(#alm-affiliate-hero) #alm-affiliate-compare .e-con-inner,
  body:has(#alm-affiliate-hero) #alm-affiliate-how .e-con-inner,
  body:has(#alm-affiliate-hero) #alm-affiliate-stats .e-con-inner,
  body:has(#alm-affiliate-hero) #alm-affiliate-dashboard .e-con-inner,
  body:has(#alm-affiliate-hero) #alm-affiliate-quote .e-con-inner,
  body:has(#alm-affiliate-hero) #alm-affiliate-faq .e-con-inner,
  body:has(#alm-affiliate-hero) #alm-affiliate-final-cta .e-con-inner {
    padding-inline: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Rate box inner: restore its own padding after above reset */
  body:has(#alm-affiliate-hero) #alm-affiliate-tiers .e-con.e-child > .e-con-inner {
    padding: .75rem 1rem !important;
  }

  /* ── ALL columns: full width by default ── */
  body:has(#alm-affiliate-hero) #alm-affiliate-hero .elementor-column,
  body:has(#alm-affiliate-hero) #alm-affiliate-why .elementor-column,
  body:has(#alm-affiliate-hero) #alm-affiliate-tiers .elementor-column,
  body:has(#alm-affiliate-hero) #alm-affiliate-how .elementor-column,
  body:has(#alm-affiliate-hero) #alm-affiliate-dashboard .elementor-column,
  body:has(#alm-affiliate-hero) #alm-affiliate-faq .elementor-column,
  body:has(#alm-affiliate-hero) #alm-affiliate-final-cta .elementor-column {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* ── 01. HERO ── */
  body:has(#alm-affiliate-hero) #alm-affiliate-hero {
    min-height: 100svh !important;
    padding-bottom: 3rem !important;
  }
  body:has(#alm-affiliate-hero) #alm-affiliate-hero .elementor-col-100 {
    min-height: 100svh !important;
  }
  body:has(#alm-affiliate-hero) #alm-affiliate-hero .elementor-heading-title {
    font-size: clamp(2rem, 9vw, 2.8rem) !important;
    line-height: 1.1 !important;
  }
  body:has(#alm-affiliate-hero) #alm-affiliate-hero .elementor-element-5c9e5afe {
    padding-bottom: 3rem !important;
    max-width: 100% !important;
  }
  body:has(#alm-affiliate-hero) #alm-affiliate-hero .elementor-widget-button .elementor-button {
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  /* ── 02. PARTNER BAR ── */
  body:has(#alm-affiliate-hero) #alm-affiliate-partner-bar {
    padding-top: 1.75rem !important;
    padding-bottom: 1.75rem !important;
  }
  body:has(#alm-affiliate-hero) #alm-affiliate-partner-bar .e-con-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: .5rem !important;
  }
  body:has(#alm-affiliate-hero) .ppill {
    font-size: 12px !important;
    padding: 5px 12px !important;
  }

  /* ── 03. WHY: e-con padding override ── */
  body:has(#alm-affiliate-hero) #alm-affiliate-why .e-con-inner {
    padding: 16px 0 !important;
  }
  body:has(#alm-affiliate-hero) #alm-affiliate-why .elementor-col-50:first-child img {
    max-height: 220px !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  /* ── 04b. DEPTH BAR ── */
  body:has(#alm-affiliate-hero) #alm-affiliate-depth-bar {
    padding-top: 0 !important;
    padding-bottom: 1.5rem !important;
  }
  body:has(#alm-affiliate-hero) #alm-affiliate-depth-bar .elementor-col-20:nth-child(2),
  body:has(#alm-affiliate-hero) #alm-affiliate-depth-bar .elementor-col-20:nth-child(4) {
    display: none !important;
  }
  body:has(#alm-affiliate-hero) #alm-affiliate-depth-bar .elementor-col-20:nth-child(1),
  body:has(#alm-affiliate-hero) #alm-affiliate-depth-bar .elementor-col-20:nth-child(3),
  body:has(#alm-affiliate-hero) #alm-affiliate-depth-bar .elementor-col-20:nth-child(5) {
    width: 33.333% !important;
    max-width: 33.333% !important;
    flex: 0 0 33.333% !important;
    text-align: center !important;
  }
  body:has(#alm-affiliate-hero) .alm-aff-depth-name { font-size: 1rem !important; }
  body:has(#alm-affiliate-hero) .alm-aff-depth-label { font-size: 9px !important; }

  /* ── 05. TIER CARDS ── */
  body:has(#alm-affiliate-hero) #alm-affiliate-tiers {
    padding-top: 0 !important;
    padding-bottom: 2.5rem !important;
  }
  body:has(#alm-affiliate-hero) #alm-affiliate-tiers .elementor-widget-image img {
    width: 96px !important;
    height: 96px !important;
  }
  body:has(#alm-affiliate-hero) .alm-aff-rate-num { font-size: 1.75rem !important; }

  /* ── 06. COMPARE TABLE: scroll ── */
  body:has(#alm-affiliate-hero) #alm-affiliate-compare {
    padding-right: 0 !important;
    overflow-x: hidden !important;
  }
  body:has(#alm-affiliate-hero) #alm-affiliate-compare .elementor-widget-html,
  body:has(#alm-affiliate-hero) #alm-affiliate-compare .elementor-widget-container {
    overflow-x: auto !important;
    display: block !important;
    width: 100% !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body:has(#alm-affiliate-hero) .ctable,
  body:has(#alm-affiliate-hero) #alm-affiliate-compare-table table {
    min-width: 500px !important;
    font-size: 11px !important;
  }
  body:has(#alm-affiliate-hero) .ctable th,
  body:has(#alm-affiliate-hero) .ctable td {
    padding: 8px 9px !important;
  }

  /* ── 07. HOW IT WORKS: single column ── */
  body:has(#alm-affiliate-hero) #alm-affiliate-how .elementor-col-25 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-top: 2.5rem !important;
  }

  /* ── 08. STATS: 2×2 ── */
  body:has(#alm-affiliate-hero) #alm-affiliate-stats .elementor-col-25 {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
  }
  body:has(#alm-affiliate-hero) .alm-aff-stat-num { font-size: 2rem !important; }

  /* ── 09. DASHBOARD ── */
  body:has(#alm-affiliate-hero) #alm-affiliate-dashboard .elementor-col-50:last-child .e-con.e-parent {
    margin-top: 1.5rem !important;
  }

  /* ── 10. QUOTE ── */
  body:has(#alm-affiliate-hero) #alm-affiliate-quote .elementor-widget-text-editor:nth-of-type(2) p {
    font-size: clamp(1.1rem, 4.5vw, 1.5rem) !important;
  }

  /* ── 11. FAQ ── */
  body:has(#alm-affiliate-hero) #alm-affiliate-faq .elementor-col-17 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  body:has(#alm-affiliate-hero) #alm-affiliate-faq .e-n-accordion-item-title-text {
    font-size: 14px !important;
  }

  /* ── 12. FINAL CTA: stack ── */
  body:has(#alm-affiliate-hero) #alm-affiliate-final-cta .elementor-section > .elementor-container {
    flex-direction: column !important;
    align-items: center !important;
  }
  body:has(#alm-affiliate-hero) #alm-affiliate-final-cta .elementor-widget-button .elementor-button {
    width: 100% !important;
    display: block !important;
  }
  body:has(#alm-affiliate-hero) #alm-affiliate-final-cta .elementor-heading-title {
    font-size: clamp(1.75rem, 7vw, 2.4rem) !important;
  }

  /* ── Misc ── */
  body:has(#alm-affiliate-hero) .upgrade-note { font-size: 12px !important; }
  body:has(#alm-affiliate-hero) #alm-affiliate-journey .elementor-heading-title {
    font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
  }
}

/* =========================================================
 * SMALL MOBILE  ≤ 390px
 * ========================================================= */
@media screen and (max-width: 390px) {

  body:has(#alm-affiliate-hero) #alm-affiliate-hero .elementor-heading-title {
    font-size: 1.85rem !important;
  }
  body:has(#alm-affiliate-hero) #alm-affiliate-stats .elementor-col-25 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* =========================================================
 * v3.0.0 PATCH — Targeted fixes from HTML analysis
 * Based on affiliate_code_4.txt live DOM verification
 * ========================================================= */

/* ── TABLET ≤ 1024px ── */
@media screen and (max-width: 1024px) {

  /* ALL inner sections within affiliate sections must wrap */
  body:has(#alm-affiliate-hero) #alm-affiliate-why .elementor-section .elementor-container,
  body:has(#alm-affiliate-hero) #alm-affiliate-dashboard .elementor-section .elementor-container,
  body:has(#alm-affiliate-hero) #alm-affiliate-tiers .elementor-section .elementor-container,
  body:has(#alm-affiliate-hero) #alm-affiliate-how .elementor-section .elementor-container,
  body:has(#alm-affiliate-hero) #alm-affiliate-stats .elementor-section .elementor-container,
  body:has(#alm-affiliate-hero) #alm-affiliate-faq .elementor-section .elementor-container,
  body:has(#alm-affiliate-hero) #alm-affiliate-final-cta .elementor-section .elementor-container {
    flex-wrap: wrap !important;
  }
}

/* ── MOBILE ≤ 767px ── */
@media screen and (max-width: 767px) {

  /* ── e-con-inner: strip ALL Elementor-generated padding-inline
     Elementor post-CSS sets per-element padding-inline (up to 84px).
     This crushes content width. Scope to affiliate sections only. ── */
  body:has(#alm-affiliate-hero) #alm-affiliate-hero .e-con,
  body:has(#alm-affiliate-hero) #alm-affiliate-hero .e-con-inner,
  body:has(#alm-affiliate-hero) #alm-affiliate-partner-bar .e-con,
  body:has(#alm-affiliate-hero) #alm-affiliate-partner-bar .e-con-inner,
  body:has(#alm-affiliate-hero) #alm-affiliate-why .e-con,
  body:has(#alm-affiliate-hero) #alm-affiliate-why .e-con-inner,
  body:has(#alm-affiliate-hero) #alm-affiliate-tiers .e-con,
  body:has(#alm-affiliate-hero) #alm-affiliate-tiers .e-con-inner,
  body:has(#alm-affiliate-hero) #alm-affiliate-how .e-con,
  body:has(#alm-affiliate-hero) #alm-affiliate-how .e-con-inner,
  body:has(#alm-affiliate-hero) #alm-affiliate-stats .e-con,
  body:has(#alm-affiliate-hero) #alm-affiliate-stats .e-con-inner,
  body:has(#alm-affiliate-hero) #alm-affiliate-dashboard .e-con,
  body:has(#alm-affiliate-hero) #alm-affiliate-dashboard .e-con-inner,
  body:has(#alm-affiliate-hero) #alm-affiliate-quote .e-con,
  body:has(#alm-affiliate-hero) #alm-affiliate-quote .e-con-inner,
  body:has(#alm-affiliate-hero) #alm-affiliate-faq .e-con,
  body:has(#alm-affiliate-hero) #alm-affiliate-faq .e-con-inner,
  body:has(#alm-affiliate-hero) #alm-affiliate-final-cta .e-con,
  body:has(#alm-affiliate-hero) #alm-affiliate-final-cta .e-con-inner {
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Restore rate-box inner padding after global reset */
  body:has(#alm-affiliate-hero) #alm-affiliate-tiers .e-con.e-child > .e-con-inner {
    padding: .75rem 1rem !important;
  }

  /* ── Hero buttons inner section: stack col-50 ── */
  body:has(#alm-affiliate-hero) #alm-affiliate-hero .elementor-section .elementor-container {
    flex-wrap: wrap !important;
  }
  body:has(#alm-affiliate-hero) #alm-affiliate-hero .elementor-section .elementor-col-50 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  body:has(#alm-affiliate-hero) #alm-affiliate-hero .elementor-section .elementor-button {
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  /* ── All affiliate inner sections must wrap ── */
  body:has(#alm-affiliate-hero) #alm-affiliate-why .elementor-section .elementor-container,
  body:has(#alm-affiliate-hero) #alm-affiliate-dashboard .elementor-section .elementor-container,
  body:has(#alm-affiliate-hero) #alm-affiliate-tiers .elementor-section .elementor-container,
  body:has(#alm-affiliate-hero) #alm-affiliate-how .elementor-section .elementor-container,
  body:has(#alm-affiliate-hero) #alm-affiliate-stats .elementor-section .elementor-container,
  body:has(#alm-affiliate-hero) #alm-affiliate-faq .elementor-section .elementor-container,
  body:has(#alm-affiliate-hero) #alm-affiliate-final-cta .elementor-section .elementor-container {
    flex-wrap: wrap !important;
  }
  /* Inner section columns: full width */
  body:has(#alm-affiliate-hero) #alm-affiliate-why .elementor-section .elementor-col-50,
  body:has(#alm-affiliate-hero) #alm-affiliate-dashboard .elementor-section .elementor-col-50,
  body:has(#alm-affiliate-hero) #alm-affiliate-final-cta .elementor-section .elementor-col-50 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  body:has(#alm-affiliate-hero) #alm-affiliate-how .elementor-section .elementor-col-25,
  body:has(#alm-affiliate-hero) #alm-affiliate-tiers .elementor-section .elementor-col-33 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  body:has(#alm-affiliate-hero) #alm-affiliate-stats .elementor-section .elementor-col-25 {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
  }
  body:has(#alm-affiliate-hero) #alm-affiliate-faq .elementor-section .elementor-col-17 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* ── Why section: image max-height ── */
  body:has(#alm-affiliate-hero) #alm-affiliate-why .elementor-col-50:first-child img {
    max-height: 240px !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  /* ── Final CTA: stack buttons ── */
  body:has(#alm-affiliate-hero) #alm-affiliate-final-cta .elementor-section .elementor-button {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* ── Compare table: horizontal scroll ── */
  body:has(#alm-affiliate-hero) #alm-affiliate-compare .elementor-widget-html {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
    width: 100% !important;
  }
  body:has(#alm-affiliate-hero) #alm-affiliate-compare-table table,
  body:has(#alm-affiliate-hero) .ctable {
    min-width: 500px !important;
  }

  /* ── Quote: centre everything ── */
  body:has(#alm-affiliate-hero) #alm-affiliate-quote .elementor-widget-container,
  body:has(#alm-affiliate-hero) #alm-affiliate-quote .elementor-widget-text-editor {
    text-align: center !important;
  }
}

/* =========================================================
 * ALMARA Affiliate — Account + Reset Mobile CSS v1.0.0
 * Append to: almara-affiliate-sub-mobile-append.css
 *
 * Breakpoints: ≤ 1024px / ≤ 767px / ≤ 390px
 * ========================================================= */

/* =========================================================
 * TABLET  ≤ 1024px
 * ========================================================= */
@media screen and (max-width: 1024px) {

  body:has(#alm-account-header) #alm-account-header,
  body:has(#alm-account-header) #alm-account-area,
  body:has(#alm-reset-header)   #alm-reset-header,
  body:has(#alm-reset-header)   #alm-reset-area {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  /* Stat tiles: 2 per row on tablet */
  body:has(#alm-account-header) #alm-account-area .slicewp-stat {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 140px !important;
  }

  /* Nav tabs: allow wrapping */
  body:has(#alm-account-header) #alm-account-area .slicewp-nav ul {
    gap: 2px !important;
  }
  body:has(#alm-account-header) #alm-account-area .slicewp-nav ul li a {
    padding: 8px 12px !important;
    font-size: 11px !important;
  }
}

/* =========================================================
 * MOBILE  ≤ 767px
 * ========================================================= */
@media screen and (max-width: 767px) {

  /* Section padding */
  body:has(#alm-account-header) #alm-account-header,
  body:has(#alm-account-header) #alm-account-area,
  body:has(#alm-reset-header)   #alm-reset-header,
  body:has(#alm-reset-header)   #alm-reset-area {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  /* e-con padding-inline reset */
  body:has(#alm-account-header) #alm-account-header .e-con,
  body:has(#alm-account-header) #alm-account-header .e-con-inner,
  body:has(#alm-account-header) #alm-account-area .e-con,
  body:has(#alm-account-header) #alm-account-area .e-con-inner,
  body:has(#alm-reset-header) #alm-reset-header .e-con,
  body:has(#alm-reset-header) #alm-reset-header .e-con-inner,
  body:has(#alm-reset-header) #alm-reset-area .e-con,
  body:has(#alm-reset-header) #alm-reset-area .e-con-inner {
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Header: tighter on mobile */
  body:has(#alm-account-header) #alm-account-header,
  body:has(#alm-reset-header) #alm-reset-header {
    padding-top: 3rem !important;
    padding-bottom: 2rem !important;
  }
  body:has(#alm-account-header) #alm-account-header .elementor-heading-title,
  body:has(#alm-reset-header) #alm-reset-header .elementor-heading-title {
    font-size: clamp(1.8rem, 7.5vw, 2.4rem) !important;
    line-height: 1.1 !important;
  }

  /* ── Account area: mobile layout ── */

  /* Stats: single column */
  body:has(#alm-account-header) #alm-account-area .slicewp-stats {
    flex-direction: column !important;
    gap: 10px !important;
  }
  body:has(#alm-account-header) #alm-account-area .slicewp-stat {
    flex: 1 0 auto !important;
    width: 100% !important;
    padding: 1rem 1.25rem !important;
  }

  /* Nav tabs: scrollable horizontal strip */
  body:has(#alm-account-header) #alm-account-area .slicewp-nav ul {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 1px !important;
  }
  body:has(#alm-account-header) #alm-account-area .slicewp-nav ul::-webkit-scrollbar { display: none !important; }
  body:has(#alm-account-header) #alm-account-area .slicewp-nav ul li a {
    padding: 9px 14px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  /* Tables: horizontal scroll */
  body:has(#alm-account-header) #alm-account-area .slicewp-table,
  body:has(#alm-account-header) #alm-account-area table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    font-size: 12px !important;
  }

  /* Affiliate link input: full width, wrap */
  body:has(#alm-account-header) #alm-account-area .slicewp-affiliate-link {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  body:has(#alm-account-header) #alm-account-area .slicewp-affiliate-link input[type="text"] {
    width: 100% !important;
  }

  /* Programme details: single column */
  body:has(#alm-account-header) #alm-account-area .slicewp-program-details,
  body:has(#alm-account-header) #alm-account-area .slicewp-commission-rates {
    flex-direction: column !important;
    gap: 10px !important;
  }

  /* Area wrapper: full width */
  body:has(#alm-account-header) #alm-account-area .slicewp-affiliate-area {
    max-width: 100% !important;
  }

  /* ── Reset area: full width card ── */
  body:has(#alm-reset-header) #alm-reset-area .slicewp-affiliate-area {
    max-width: 100% !important;
    padding: 1.5rem !important;
  }
}

/* =========================================================
 * SMALL MOBILE  ≤ 390px
 * ========================================================= */
@media screen and (max-width: 390px) {

  body:has(#alm-account-header) #alm-account-header .elementor-heading-title,
  body:has(#alm-reset-header) #alm-reset-header .elementor-heading-title {
    font-size: 1.7rem !important;
  }

  body:has(#alm-account-header) #alm-account-area,
  body:has(#alm-reset-header) #alm-reset-area {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body:has(#alm-reset-header) #alm-reset-area .slicewp-affiliate-area {
    padding: 1.25rem !important;
  }
}