/* eTree help hub (uploads/etree-ui/help.css): the /faq/ page drawn by [etree_help], on top of Foundation's ui.css.
   Loaded only on that page while etree_ui_flags['help'] is on. Every rule sits under .hp (the wrapper is
   <div class="e3 hp">, so ui.css tokens apply). Mockup: work/ia/mock/help.html (prefix hp-).
   Breakpoints: phone < 700 · tablet 700-1099 · desktop 1100+ (sticky contents left, sections right). */

.e3.hp{padding-bottom:48px}

/* Flatsome element styles this page replaces */
.hp button.e3-btn{min-height:48px}
.hp label{display:block;text-transform:none;letter-spacing:0}
.hp dl,.hp dt,.hp dd{margin:0;padding:0}
.hp dt{font-weight:400}
.hp dt,.hp dd{font-size:inherit;text-transform:none;letter-spacing:0}
.hp summary{text-transform:none}

/* Page head (kit k-phead) */
.hp .k-phead{padding-top:8px}
.hp .k-phead h1{font-size:1.75rem;line-height:2rem}
.hp .k-answer{margin-top:4px;font-size:14px;line-height:18px;color:var(--text);max-width:62ch}

/* Link rows (kit k-rows): quick answers and lawn questions, 56 px, icon, chevron */
.hp .k-rows{border-radius:var(--r-tile);background:var(--stone)}
.hp .k-rows a{display:flex;align-items:center;gap:14px;min-height:56px;padding:8px 16px;font-size:15px;font-weight:700;line-height:1.3;color:var(--text);text-decoration:none}
.hp .k-rows a>span{min-width:0}
.hp .k-rows li+li a{box-shadow:inset 0 1px 0 var(--stone-2)}
.hp .k-rows .e3-ico{width:24px;height:24px;color:var(--forest)}
.hp .k-rows .k-go{margin-left:auto;width:18px;height:18px}
.hp .k-rows a:active{background:var(--stone-2)}

/* Top: head, quick answers, (Urdu summary only with the urdu switch) */
.hp .hp-top{display:grid;grid-template-columns:minmax(0,1fr);row-gap:12px}
.hp .hp-ur{position:relative;padding:14px 18px 8px;font-size:1.0625rem;line-height:2.08}
.hp .hp-ur bdi{font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:.01em}

/* Contents */
.hp .hp-body{margin-top:16px}
.hp .hp-toc-h{font-family:var(--sans);font-size:14px;font-weight:700;line-height:20px;letter-spacing:0;color:var(--muted)}
.hp .hp-toc ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;margin-top:2px}
.hp .hp-toc a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;box-shadow:inset 0 -1px 0 var(--line);font-size:15px;font-weight:700;line-height:1.25;color:var(--forest);text-decoration:none}
.hp .hp-toc a .e3-ico{width:14px;height:14px;color:var(--leaf-deep)}

/* Sections */
.hp .hp-sec{position:relative;padding-top:40px;scroll-margin-top:72px}
.hp .hp-alias{position:absolute;top:0;left:0;width:1px;height:1px;scroll-margin-top:72px}
.hp .hp-sec-h{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.hp .hp-sec-h .e3-ico{width:30px;height:30px;color:var(--forest)}
.hp .hp-sec p{max-width:62ch}
.hp .hp-sec>p+p{margin-top:10px}
.hp .hp-sec p a:not([class]),.hp .hp-lines a:not([class]){color:var(--forest);font-weight:700}
.hp .hp-links{display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:12px}
.hp .hp-links .e3-ico{width:16px;height:16px}

/* Two ways to order */
.hp .hp-ways{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.hp .hp-way{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:14px;align-content:start;padding:16px 18px;border-radius:var(--r-tile);background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.hp .hp-way>.e3-ico{grid-row:span 2;width:28px;height:28px;color:var(--forest)}
.hp .hp-way h3,.hp .hp-steps h3{font-family:var(--sans);font-size:17px;font-weight:700;letter-spacing:0;line-height:1.3;color:var(--forest)}
.hp .hp-way h3{margin-top:2px}
.hp .hp-way p{margin-top:4px;font-size:15px;line-height:1.5;color:var(--muted)}
.hp .hp-way p b,.hp .hp-steps p b{color:var(--text)}
.hp .hp-sec .hp-wa{color:var(--forest);font-weight:700;text-decoration:underline;text-decoration-thickness:.07em}

/* Transfer steps */
.hp .hp-steps{display:grid;gap:10px;max-width:720px}
.hp .hp-steps>li{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:14px;padding:16px;border-radius:var(--r-tile);background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.hp .hp-num{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--forest);color:#fff;font-family:var(--serif);font-weight:600;font-size:18px;line-height:1}
.hp .hp-steps h3{margin-top:6px}
.hp .hp-steps p{margin-top:4px;font-size:15px;line-height:1.5;color:var(--muted)}
.hp .hp-eg{max-width:380px;margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--stone);font-variant-numeric:tabular-nums}
.hp .hp-sec .hp-eg p{max-width:none}
.hp .hp-sec .hp-eg-h{margin:0;font-size:13px;font-weight:700;color:var(--muted)}
.hp .hp-sec .hp-eg-h a{color:var(--forest)}
.hp .hp-eg dl{display:grid;gap:2px;margin-top:4px}
.hp .hp-eg dl>div{display:flex;justify-content:space-between;gap:12px;font-size:15px;color:var(--text)}
.hp .hp-eg dd{font-weight:700;color:var(--forest)}
.hp .hp-eg .hp-eg-x,.hp .hp-eg .hp-eg-x dd{color:var(--leaf-deep)}
.hp .hp-sec .hp-eg-save{margin-top:6px;padding-top:6px;box-shadow:inset 0 1px 0 var(--stone-2);font-size:14px;font-weight:700;color:var(--leaf-deep)}
.hp .hp-pay{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.hp .hp-pay li{display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 10px;border-radius:999px;background:var(--sage);font-size:13px;font-weight:700;line-height:1.3;color:var(--forest)}
.hp .hp-pay .e3-ico{width:16px;height:16px}

/* Callout (sage) */
.hp .hp-note{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;margin-top:14px;padding:14px 16px;border-radius:var(--r-tile);background:var(--sage);max-width:720px}
.hp .hp-note>.e3-ico{width:28px;height:28px;color:var(--forest)}
.hp .hp-note p{font-size:15px;line-height:1.5}
.hp .hp-note b{color:var(--forest)}

/* Guarantee card */
.hp .hp-card{margin-top:2px;padding:18px;border-radius:var(--r-tile);background:#fff;box-shadow:inset 0 0 0 1px var(--line);max-width:720px}
.hp .hp-card .e3-btn{margin-top:14px}
.hp .hp-card .e3-btn .e3-ico{width:22px;height:22px}
.hp .hp-sec .hp-scope{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;max-width:none;margin-top:16px;padding-top:14px;box-shadow:inset 0 1px 0 var(--line);font-size:15px;line-height:1.5;color:var(--muted)}
.hp .hp-scope .e3-ico{width:22px;height:22px;color:var(--forest)}

/* Returns lines */
.hp .hp-lines{display:grid;gap:12px;max-width:720px}
.hp .hp-lines li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;font-size:15px;line-height:1.5;color:var(--text)}
.hp .hp-lines .e3-ico{width:24px;height:24px;color:var(--forest)}

/* Tracking form (WooCommerce's order tracking, posted to /track-order/) */
.hp .hp-form{display:grid;gap:4px;padding:18px;border-radius:var(--r-tile);background:#fff;box-shadow:inset 0 0 0 1px var(--line);max-width:720px}
.hp .hp-form label{margin:8px 0 0;font-size:14px;font-weight:700;line-height:1.4;color:var(--forest)}
.hp .hp-form label:first-child{margin-top:0}
.hp .hp-form input:not([type=hidden]){display:block;width:100%;max-width:none;height:52px;margin:0;padding:0 14px;border-radius:12px;border:1px solid var(--field-line);background:#fff;font-size:16px;color:var(--text);box-shadow:none;vertical-align:baseline}
.hp .hp-form input:not([type=hidden]):focus{border-color:var(--forest);outline:2px solid var(--forest);outline-offset:0;box-shadow:none}
.hp .hp-form input::placeholder{color:#7C8775;opacity:1}
.hp .hp-form button.e3-btn{width:100%;margin-top:14px}
.hp .hp-form .e3-btn .e3-ico{width:22px;height:22px}
.hp .hp-sec .hp-form-or{max-width:none;margin-top:10px;font-size:14px;line-height:1.4;color:var(--muted);text-align:center}
.hp .hp-form-or .e3-link{white-space:normal}
.hp .hp-form-or .e3-ico{width:20px;height:20px;color:var(--wa)}

/* Lawn rows, FAQ */
.hp .hp-lawn .k-rows,.hp .hp-faq .k-faq{max-width:720px}

/* Contact: forest WhatsApp band as a panel, contact lines, plant-question form */
.hp .hp-contact .k-waband{padding-bottom:16px}
.hp .hp-contact .k-waband-in{align-items:flex-start}
.hp .hp-contact .k-waband-in>div{flex:1 1 260px;min-width:0}
.hp .hp-contact h2.k-waband-line{font-size:1.75rem}
.hp .hp-contact .e3-btn .e3-ico{width:22px;height:22px}
.hp .hp-contact :focus-visible{outline-color:var(--focus-dark)}
.hp .hp-cl{display:grid;margin:0 22px;border-top:1px solid rgba(255,255,255,.14)}
.hp .hp-cl li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;min-height:56px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:15px;color:var(--on-forest)}
.hp .hp-cl .e3-ico{width:22px;height:22px;color:var(--focus-dark)}
.hp .hp-cl a{color:#fff;font-weight:700;text-decoration:none;overflow-wrap:anywhere}
.hp .e3-ask{display:grid;gap:14px;margin:18px 12px 0;padding:18px;border-radius:var(--r-tile);background:var(--forest-2);color:var(--on-forest)}
.hp .e3-ask-head{display:flex;gap:14px;align-items:flex-start}
.hp .e3-ask .e3-ask-logo{width:36px;height:36px;color:#7BD88F}
.hp .e3-ask h3{font-size:1.25rem;color:#fff}
.hp .e3-ask-head p{margin-top:6px;font-size:var(--fs-small);line-height:1.5;color:var(--on-forest)}
.hp .e3-ask-fields{display:grid;gap:8px}
.hp .e3-ask label{margin:6px 0 0;font-size:var(--fs-small);font-weight:700;line-height:1.4;color:var(--on-forest)}
.hp .e3-ask input,.hp .e3-ask textarea{display:block;width:100%;max-width:none;height:auto;min-height:52px;margin:0;padding:14px 16px;border:0;border-radius:12px;background:#fff;box-shadow:none;font:inherit;font-size:1rem;line-height:1.5;color:var(--text);resize:none}
.hp .e3-ask textarea{min-height:112px;resize:vertical}
.hp .e3-ask input:focus,.hp .e3-ask textarea:focus{outline:2px solid var(--focus-dark);outline-offset:2px;box-shadow:none}
.hp .e3-ask .e3-btn{width:100%;min-height:52px;margin-top:8px}
.hp .e3-ask .e3-btn .e3-ico{width:22px;height:22px;color:#fff}

@media (max-width:379px){.hp .hp-ur{font-size:1rem;padding-left:14px;padding-right:14px}}

/* Tablet: two ways side by side, contents in 3 columns */
@media (min-width:700px){
  .hp .hp-ways{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px}
  .hp .hp-toc ol{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Desktop: quick answers as 4 tiles, Urdu beside the H1 (when shown), sticky contents left, sections right,
   tracking form beside the contact panel */
@media (min-width:1100px){
  .hp .hp-top{row-gap:28px;padding-top:36px}
  .hp .hp-top.hp-top-ur{grid-template-columns:minmax(0,1fr) 440px;grid-template-areas:"head urdu" "quick quick";column-gap:56px;align-items:center}
  .hp .hp-top-ur>.k-phead{grid-area:head}.hp .hp-top-ur>.hp-quick{grid-area:quick}.hp .hp-top-ur>.hp-ur{grid-area:urdu;padding:18px 24px 10px;font-size:1.125rem}
  .hp .k-phead{padding-top:0}
  .hp .k-phead h1{font-size:2.5rem;line-height:1.1}
  .hp .k-answer{margin-top:8px;font-size:18px;line-height:1.5;max-width:44ch}
  .hp .hp-quick{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;background:transparent} /* 5th tile: Call or WhatsApp (22 Oct) */
  .hp .hp-quick li a{position:relative;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:14px;min-height:136px;height:100%;padding:20px 48px 20px 20px;border-radius:var(--r-tile);background:var(--stone);box-shadow:none;font-size:17px;line-height:1.35;transition:background-color .15s}
  .hp .hp-quick .e3-ico{width:32px;height:32px}
  .hp .hp-quick .k-go{position:absolute;right:18px;bottom:22px;width:18px;height:18px}
  .hp .hp-body{display:grid;grid-template-columns:240px minmax(0,1fr);column-gap:72px;margin-top:20px}
  .hp .hp-toc{position:sticky;top:24px;align-self:start;padding-top:48px}
  .hp .hp-toc-h{font-size:13px;margin-bottom:6px}
  .hp .hp-toc ol{display:block;margin:0;box-shadow:inset 2px 0 0 var(--line)}
  .hp .hp-toc a{justify-content:flex-start;min-height:40px;padding:0 0 0 18px;box-shadow:none;font-size:15px;color:var(--muted)}
  .hp .hp-toc a .e3-ico{display:none}
  .hp .hp-toc a.is-on{color:var(--forest);box-shadow:inset 3px 0 0 var(--leaf)}
  .hp .hp-secs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;align-items:start}
  .hp .hp-secs>*{grid-column:1/-1}
  .hp .hp-secs>#track{grid-column:1;order:10}
  .hp .hp-secs>#contact{grid-column:2;order:11}
  .hp .hp-sec{padding-top:48px;scroll-margin-top:24px}
  .hp .hp-alias{scroll-margin-top:24px}
  .hp .hp-sec-h .e3-ico{width:34px;height:34px}
  .hp .hp-contact .k-waband.k-panel .k-waband-in{padding:28px 28px 22px}
  .hp .hp-contact h2.k-waband-line{font-size:2rem}
  .hp .hp-cl{margin:0 28px}
  .hp .e3-ask{margin:20px 16px 0}
  .hp .e3-ask textarea{min-height:96px}
}
@media (hover:hover){
  .hp .hp-quick li a:hover,.hp .k-rows a:hover{background:var(--stone-2)}
  .hp .hp-toc a:hover{color:var(--forest)}
}

/* Links inside running text are underlined, as in the mockup (the theme's a{text-decoration:none} won over ui.css).
   Arrow links, buttons, rows and the contents list keep their own look. (Wave-3 fix.) */
.hp .hp-sec p a:not([class]),.hp .hp-sec .hp-lines a:not([class]),.hp .k-qa-a a:not([class]),.hp .hp-top p a:not([class]){text-decoration:underline;text-decoration-thickness:.07em;text-underline-offset:.2em}

/* Pay online (checkout hotfix, 23 Oct 2026): PayFast and the manual transfer side by side, then the transfer's 3 steps
   under their own heading (step titles become h4 there). */
.hp .hp-sec p.hp-lead{max-width:62ch;margin-bottom:4px;font-size:16px;line-height:1.5;color:var(--text)}
.hp .hp-online{margin-top:14px}
.hp .hp-way>.hp-pay{grid-column:2}
.hp .hp-steps h4{margin-top:6px;font-family:var(--sans);font-size:17px;font-weight:700;letter-spacing:0;line-height:1.3;color:var(--forest)}
.hp h3.hp-sub{max-width:720px;margin:22px 0 10px;font-family:var(--sans);font-size:17px;font-weight:700;letter-spacing:0;line-height:1.3;color:var(--forest);scroll-margin-top:140px}