/* eTree UI foundation (uploads/etree-ui/ui.css): tokens, base, buttons, chips, the product card, accordion, sheet
   shell, WhatsApp band, Urdu lines and small utilities, ported from the live homepage (etree-home3.php) and the
   mockup kit (work/ia/mock/kit.css). Every rule is scoped under .e3; templates put class="e3" on their wrapper.
   Breakpoints: phone < 700 · tablet 700-1099 (3-column grids) · desktop 1100+ (4-column grids). */

@font-face{font-family:"E3 Serif";src:url("../etree-home3/f/source-serif-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
/* Lato 400, latin subset, self-hosted (wave 3). Bold is drawn from it by the browser until a Lato 700 file is added here. */
@font-face{font-family:"Lato";src:url("lato-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Tokens (body.e3-ui gets the variables only, for chrome outside an .e3 wrapper) ---------- */
.e3,body.e3-ui{--paper:#F7F7F2;--stone:#EEEAE1;--stone-2:#E6E1D5;--sage:#E3EADB;--forest:#154213;--forest-2:#0F3210;--leaf:#6AAF07;--leaf-deep:#3D6E05;--marigold:#F2C94C;
  --text:#1E2A1C;--muted:#55624F;--line:#D9DDD0;--field-line:#848F7D;--on-forest:#EEF3E8;--on-forest-2:#B9CDB0;--focus-dark:#A9D86E;--wa:#1F7A3F;
  --serif:"E3 Serif",Georgia,"Times New Roman",serif;--sans:"Lato",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--urdu:"E3 Nastaliq","Noto Nastaliq Urdu","Jameel Noori Nastaleeq","Noto Naskh Arabic",serif;
  --fs-display:clamp(2.25rem,1.55rem + 2.7vw,3.75rem);--fs-h2:clamp(1.75rem,1.35rem + 1.5vw,2.75rem);--fs-h3:clamp(1.1875rem,1.08rem + .45vw,1.5rem);
  --fs-lead:clamp(1.0625rem,1rem + .25vw,1.125rem);--fs-body:1rem;--fs-small:.875rem;--fs-tiny:.75rem;
  --r-tile:14px;--r-panel:22px;--ease:cubic-bezier(.2,0,0,1);
  --gutter:clamp(16px,3.2vw,40px);--section:clamp(56px,7vw,104px);--gap:clamp(12px,1.6vw,20px)}

/* ---------- Base ---------- */
.e3{font-family:var(--sans);font-size:var(--fs-body);line-height:1.55;color:var(--text);background:var(--paper);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(21,66,19,.08);text-wrap:pretty}
.e3 *,.e3 *::before,.e3 *::after{box-sizing:border-box}
.e3 ::selection{background:var(--forest);color:#fff}
.e3 a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:.07em}
.e3 :focus-visible{outline:2px solid var(--forest);outline-offset:3px}
@media (forced-colors:active){.e3 :focus-visible{outline-color:Highlight}}
.e3 h1,.e3 h2,.e3 h3{font-family:var(--serif);font-weight:600;color:var(--forest);letter-spacing:-.015em;line-height:1.08;margin:0;text-transform:none;text-wrap:balance}
.e3 h2{font-size:var(--fs-h2)}
.e3 h3{font-size:var(--fs-h3);line-height:1.2}
.e3 p{margin:0}
.e3 ul,.e3 ol{list-style:none;margin:0;padding:0}
.e3 li{margin:0}
.e3 img{max-width:100%}
.e3 input,.e3 select,.e3 textarea{font-family:inherit}
.e3 button{font:inherit;font-weight:700;margin:0;min-height:0;line-height:1.2;text-transform:none;letter-spacing:0}
.e3 .e3-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.e3 .e3-nowrap{white-space:nowrap}
.e3 .e3-wrap{width:100%;max-width:1270px;margin:0 auto;padding:0 var(--gutter)}
.e3 .e3-ico{width:1.25em;height:1.25em;flex:0 0 auto;vertical-align:-.25em}
.e3 .e3-ico [opacity]{fill:var(--leaf);opacity:.4}
html.e3-lock,html.e3-lock body{overflow:hidden}

/* ---------- Utilities ---------- */
.e3 .k-sec{padding:32px 0}
.e3 .k-sec-tint{background:var(--sage)}
.e3 .k-sec-stone{background:var(--stone)}
.e3 .k-h2{font-size:1.5rem;line-height:1.15}
.e3 .k-lead{font-size:15px;line-height:1.5;color:var(--muted);max-width:60ch}
.e3 .k-muted{color:var(--muted)}
.e3 .k-num{font-variant-numeric:tabular-nums}
@media (min-width:1100px){.e3 .k-sec{padding:48px 0}.e3 .k-h2{font-size:2rem}}

/* ---------- Buttons and links ---------- */
.e3 .e3-btn,.e3 .e3-add{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;margin:0;padding:0 24px;border-radius:999px;border:0;background:var(--forest);color:#fff!important;font-weight:700;font-size:var(--fs-body);line-height:1.2;text-decoration:none;text-transform:none;letter-spacing:0;cursor:pointer;-webkit-user-select:none;user-select:none;
  transition-property:scale,background-color,color,box-shadow;transition-duration:.15s;transition-timing-function:ease-out}
.e3 .e3-btn:active,.e3 .e3-add:active,.e3 .e3-chip:active{scale:.96}
.e3 .e3-btn-light{background:#fff;color:var(--forest)!important}
.e3 .e3-btn-ghost{background:transparent;color:#fff!important;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.e3 .e3-btn-quiet{background:var(--sage);color:var(--forest)!important}
.e3 .e3-btn-wa{background:var(--wa)}
.e3 .e3-btn-light .e3-ico{color:var(--wa)}
.e3 .e3-link{display:inline-flex;align-items:center;gap:.4em;min-height:32px;font-weight:700;color:var(--forest)!important;text-decoration:none;white-space:nowrap}
.e3 .e3-link .e3-ico{transition:translate .2s var(--ease)}
.e3 .e3-link:active{opacity:.7}
@media (hover:hover){
  .e3 .e3-btn:hover{background:var(--forest-2)}
  .e3 .e3-btn-light:hover{background:var(--sage)}.e3 .e3-btn-ghost:hover{background:rgba(255,255,255,.1)}
  .e3 .e3-btn-quiet:hover{background:#D3DECA}.e3 .e3-btn-wa:hover{background:#18632F}
  .e3 .e3-link:hover .e3-ico{translate:3px 0}
}

/* ---------- Chips: toggles (tick + count), link chips (arrow), Filter pill ---------- */
.e3 .e3-chip{display:inline-flex;align-items:center;gap:.5em;min-height:40px;margin:0;padding:0 14px;border:0;border-radius:999px;background:#fff;color:var(--forest)!important;font-weight:700;font-size:var(--fs-small);line-height:1.2;text-decoration:none;text-transform:none;letter-spacing:0;white-space:nowrap;box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;-webkit-user-select:none;user-select:none;transition-property:background-color,box-shadow,scale;transition-duration:.15s}
.e3 .e3-chip .e3-ico{width:18px;height:18px}
.e3 .e3-chip>.e3-ico:first-child{margin-left:-3px}
.e3 .k-chips{display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;margin:0 calc(var(--gutter)*-1);padding:0 var(--gutter)}
.e3 .k-chips::-webkit-scrollbar{display:none}
.e3 .k-chips>*{flex:0 0 auto}
@media (min-width:1100px){.e3 .k-chips{flex-wrap:wrap;overflow:visible;margin:0;padding:0}}
.e3 .k-chip-n{font-weight:400;color:var(--muted);font-variant-numeric:tabular-nums}
.e3 .k-chip-filter{box-shadow:inset 0 0 0 1.5px var(--forest)}
.e3 .k-chip-filter.is-on,.e3 .k-chip-t.is-on{background:var(--forest);color:#fff!important;box-shadow:none}
.e3 .k-chip-t.is-on .k-chip-n{color:var(--on-forest-2)}
.e3 .k-chip-go{background:var(--sage);box-shadow:none}
.e3 .k-chip-go .e3-ico{width:16px;height:16px;margin-right:-2px}
.e3 .k-chip-sep{width:1px;height:24px;background:var(--line)}
@media (hover:hover){.e3 .e3-chip:hover{background:var(--sage);box-shadow:inset 0 0 0 1px transparent}.e3 .k-chip-t.is-on:hover,.e3 .k-chip-filter.is-on:hover{background:var(--forest-2)}.e3 .k-chip-go:hover{background:#D3DECA}}

/* ---------- Trust strip (identical wording everywhere) ---------- */
.e3 .k-trust{font-size:13px;line-height:18px;color:var(--text)}
.e3 .k-trust>span{margin-right:10px}
.e3 .k-trust>span:last-child{margin-right:0}
.e3 .k-trust .e3-ico{width:16px;height:16px;margin-right:5px;vertical-align:-3px;color:var(--forest)}
.e3 .k-t{white-space:nowrap}
@media (min-width:1100px){.e3 .k-trust{font-size:14px}}

/* ---------- Product grid and card (spec §2.2) ---------- */
.e3 .e3-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px var(--gap)}
@media (min-width:700px){.e3 .e3-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.e3 .e3-grid.k-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.e3 .e3-grid.k-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 20px}}
.e3 .e3-card{display:flex;flex-direction:column;min-width:0}
.e3 .e3-card-media{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--r-tile);background:var(--stone);overflow:hidden;transition:scale .15s ease-out}
.e3 .e3-card-media:active{scale:.98}
.e3 .e3-card-media img{display:block;width:100%;height:100%;object-fit:cover;transition:scale .4s var(--ease)}
.e3 .e3-card-photo{background:var(--stone-2)}
@media (hover:hover){.e3 .e3-card-media:hover img{scale:1.04}}
.e3 .e3-sticker{position:absolute;left:10px;top:10px;padding:4px 10px;border-radius:999px;background:var(--marigold);color:#2B2208;font-size:var(--fs-tiny);font-weight:700;line-height:1.3;white-space:nowrap}
.e3 .e3-card-name{margin-top:9px;font-family:var(--sans);font-size:var(--fs-body);font-weight:400;letter-spacing:0;line-height:1.3;overflow:visible}
.e3 .e3-card-name a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding:3px 0;text-decoration:none;color:var(--text)}
.e3 .e3-card-name a:active{opacity:.7}
@media (hover:hover){.e3 .e3-card-name a:hover{text-decoration:underline}}
/* Urdu name on its own Nastaliq line; the empty line keeps its height so cards stay level */
.e3 .e3-card-ur{font-family:var(--urdu);font-size:1.0625rem;line-height:2.6;height:2.6em;margin:-.35em 0 -.4em;color:var(--text);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left;unicode-bidi:plaintext;pointer-events:none}
.e3 .k-fact{margin-top:2px;font-size:13px;line-height:1.35;color:var(--muted)}
.e3 .k-season{display:flex;gap:6px;align-items:flex-start;min-height:2.7em;margin-top:2px;font-size:13px;line-height:1.35;color:var(--text)}
.e3 .k-season .e3-ico{width:16px;height:16px;margin-top:1px;color:var(--forest)}
/* Price block: COD price + 'cash on delivery', then the transfer price */
.e3 .e3-card-foot{margin-top:auto;padding-top:10px}
.e3 .e3-card-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;color:var(--text);font-variant-numeric:tabular-nums}
.e3 .e3-card-price b{font-size:1.125rem;color:var(--forest)}
.e3 .e3-from{font-size:var(--fs-small);color:var(--muted)}
.e3 .k-cod{font-size:12px;font-weight:400;color:var(--muted);white-space:nowrap}
.e3 .e3-card-xfer{font-size:var(--fs-small);font-weight:400;color:var(--leaf-deep);font-variant-numeric:tabular-nums}
.e3 .e3-card-xfer b{font-weight:700}
/* Sale (O8, pricing round): the regular price struck beside the price in a muted tone, then a soft marigold saving with
   "cash on delivery". --sale / --sale-ink: marigold at about 30% on white, and its ink (contrast 9:1). */
.e3,body.e3-ui{--sale:#FCEFC4;--sale-ink:#5A4200}
.e3 .e3-was{font-size:13px;font-weight:400;color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:rgba(85,98,79,.75);white-space:nowrap}
.e3 .e3-card-save{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;margin-top:4px}
.e3 .e3-off{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--sale);color:var(--sale-ink);font-size:12px;font-weight:700;line-height:16px;white-space:nowrap;font-variant-numeric:tabular-nums}
.e3 .e3-card-save+.e3-card-xfer{margin-top:3px}
/* Buy control */
.e3 .e3-size{display:block;width:100%;height:40px;margin:12px 0 0;padding:0 28px 0 9px;border-radius:12px;border:1px solid var(--field-line);box-shadow:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23154213' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center/14px 14px;
  -webkit-appearance:none;appearance:none;font:inherit;font-size:var(--fs-small);line-height:1.2;color:var(--text);text-overflow:ellipsis;cursor:pointer}
@media (max-width:699px){.e3 .e3-size{font-size:1rem}} /* 16px: iPhones zoom into smaller fields */
.e3 .e3-size:focus{border-color:var(--forest);outline:2px solid var(--forest);outline-offset:0}
.e3 .e3-card .e3-add{width:100%;min-height:42px;margin-top:12px;padding:0 10px;font-size:var(--fs-small);text-align:center;background:transparent;color:var(--forest)!important;box-shadow:inset 0 0 0 1.5px rgba(21,66,19,.4)}
.e3 .e3-card .e3-size+.e3-add{margin-top:8px}
@media (hover:hover){.e3 .e3-card .e3-add:hover{background:var(--forest);color:#fff!important;box-shadow:none}}
.e3 .e3-card .e3-add.loading{opacity:.6;pointer-events:none}
/* flatsome-shop.css hides .add_to_cart_button.added (0,2,0) and loads later; every Add in an .e3 template stays visible as
   "Added ✓ · View cart" (cards, lawn kits and sets, the product page add-on). A second tap while loading does nothing. */
.e3 .add_to_cart_button.added{display:inline-flex}
.e3 .add_to_cart_button.loading{pointer-events:none}
.e3 .e3-card .e3-add.added{background:var(--forest);color:#fff!important;box-shadow:none}
.e3 .e3-card .e3-add::after,.e3 .e3-card .e3-add::before{content:none!important}
.e3 .e3-card .added_to_cart{display:none!important}
.e3 .e3-card .k-notify{color:var(--wa)!important;box-shadow:inset 0 0 0 1.5px rgba(31,122,63,.5)}
@media (hover:hover){.e3 .e3-card .k-notify:hover{background:var(--wa);color:#fff!important}}
.e3 .k-buy{display:flex;gap:8px;margin-top:12px}
.e3 .k-buy .e3-add{flex:1 1 auto;margin-top:0!important}
.e3 .k-wa-sq{flex:0 0 42px;display:grid;place-items:center;width:42px;height:42px;border-radius:999px;color:var(--wa)!important;box-shadow:inset 0 0 0 1.5px rgba(31,122,63,.5);text-decoration:none}
@media (hover:hover){.e3 .k-wa-sq:hover{background:var(--wa);color:#fff!important;box-shadow:none}}
/* Variants: lawn and supplies (1:1 pack shot), sold out, no photo */
.e3 .k-card-lawn .e3-card-media,.e3 .k-card-pack .e3-card-media{aspect-ratio:1}
.e3 .k-card-lawn .e3-card-media img,.e3 .k-card-pack .e3-card-media img{object-position:50% 72%}
.e3 .k-card-out .e3-card-media img{opacity:.5;filter:grayscale(.7)}
.e3 .k-card-out .e3-card-name a,.e3 .k-card-out .e3-card-price b{color:var(--muted)}
.e3 .k-out{position:absolute;left:10px;top:10px;padding:4px 10px;border-radius:999px;background:#fff;color:var(--muted);font-size:var(--fs-tiny);font-weight:700;line-height:1.3}
.e3 .k-nophoto{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-decoration:none}
.e3 .k-nophoto>.e3-ico{width:56px;height:56px;color:var(--forest);opacity:.45}
.e3 .k-nophoto>span:not(.e3-sticker):not(.k-out){font-size:12px;font-weight:700;color:var(--muted)}
@media (min-width:1100px){.e3 .k-nophoto>.e3-ico{width:72px;height:72px}}

/* ---------- Accordion: <details class="k-qa"><summary>…</summary><div class="k-qa-a">…</div></details> ---------- */
.e3 .k-faq{border-top:1px solid var(--line)}
.e3 .k-qa{border-bottom:1px solid var(--line)}
.e3 .k-qa>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 0;list-style:none;cursor:pointer;font-size:16px;font-weight:700;line-height:1.35;color:var(--forest)}
.e3 .k-qa>summary::-webkit-details-marker{display:none}
.e3 .k-qa>summary::after{content:"";flex:0 0 14px;width:14px;height:14px;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 100% no-repeat;transition:rotate .2s var(--ease)}
.e3 .k-qa[open]>summary::after{rotate:45deg}
.e3 .k-qa-a{padding:0 0 18px;font-size:15px;line-height:1.55;color:var(--muted);max-width:68ch}
.e3 .k-qa-a p+p{margin-top:8px}
.e3 .k-qa-a a{color:var(--forest);font-weight:700}

/* ---------- Sheet shell (ui.js: data-e3-open / data-e3-sheet / data-e3-close): full screen on phones, 380 px panel from 700 px ---------- */
.e3 .k-sheet,.e3.k-sheet{position:fixed;inset:0;z-index:110}
.e3 .k-sheet[hidden],.e3.k-sheet[hidden]{display:none}
.e3 .k-scrim{position:absolute;inset:0;background:rgba(15,50,16,.45)}
.e3 .k-sheet-panel{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--paper)}
@media (min-width:700px){.e3 .k-sheet-panel{left:auto;width:380px;box-shadow:-12px 0 32px -16px rgba(15,50,16,.5)}}
.e3 .k-sheet-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 4px 0 16px;border-bottom:1px solid var(--line)}
.e3 .k-sheet-head h2{font-size:1.375rem}
.e3 .k-sheet-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:0 16px 16px}
.e3 .k-sheet-foot{flex:0 0 auto;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--paper)}
.e3 .k-sheet-foot .e3-btn{padding:0 20px}
.e3 .k-x{display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--forest);cursor:pointer}
.e3 .k-x .e3-ico{width:22px;height:22px}

/* ---------- WhatsApp band (forest): full width, or a rounded panel with k-panel ---------- */
.e3 .k-waband{background:var(--forest);color:var(--on-forest)}
.e3 .k-waband-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding:32px 0}
.e3 .e3-wrap.k-waband-in{padding:32px var(--gutter)}
.e3 .k-waband-line{font-family:var(--serif);font-weight:600;font-size:1.5rem;line-height:1.15;letter-spacing:-.015em;color:#fff;max-width:26ch;text-wrap:balance}
.e3 .k-waband-sub{margin-top:6px;font-size:14px;color:var(--on-forest-2)}
.e3 .k-waband .e3-btn .e3-ico{width:22px;height:22px}
.e3 .k-waband :focus-visible{outline-color:var(--focus-dark)}
.e3 .k-waband.k-panel{border-radius:var(--r-panel)}
.e3 .k-waband.k-panel .k-waband-in{padding:24px 22px}
@media (min-width:1100px){.e3 .k-waband-line{font-size:2rem}.e3 .k-waband-in,.e3 .e3-wrap.k-waband-in{padding-top:44px;padding-bottom:44px}.e3 .k-waband.k-panel .k-waband-in{padding:36px 40px}}

/* ---------- Urdu on its own line (lang="ur" dir="rtl") ---------- */
.e3 .k-ur{display:block;font-family:var(--urdu);font-size:1.125rem;line-height:2;font-weight:400;color:var(--muted);text-align:left;unicode-bidi:plaintext}
.e3 .k-ur-box{padding:16px 18px;border-radius:var(--r-tile);background:var(--sage);font-family:var(--urdu);font-size:1.125rem;line-height:2.3;color:var(--text);text-align:right}

@media (prefers-reduced-motion:reduce){.e3 *,.e3 *::before,.e3 *::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}