/* ============================================================================
   esh-templates.css -- ONE stylesheet for AI-generated article + product content.

   Deployed platform-wide (Platinum theme / master page). It is NOT part of any
   editable field, so a seller cannot delete or damage it: they edit text inside
   already-styled elements, never the styling itself.

   Design rules
   ------------
   1. Every class is namespaced `esh-`. Nothing here can touch site chrome.
   2. Every rule is scoped under a root (`.esh-art` / `.esh-pdx`), giving at
      least (0,2,0) so ordinary storefront theme rules lose.
   3. `!important` is used ONLY where this codebase has already proven themes
      fight back: font-family and table width (see _force_full_width_tables in
      long_desc_templates.py, which exists because themes ship
      `table { width: auto !important }`).
   4. If this file ever fails to load, content still renders as semantic HTML --
      headings, lists, tables. Degraded, never broken.
   5. Restyling published content = editing this file. No regeneration.
   ============================================================================ */

/* ============================================================================
   ARMOR -- Platinum's own editor stylesheet
   template_inc/eshopstoresframework/css/style.css (v4.7.9)

   It styles content INSIDE the description container with high specificity, e.g.

     .product_product_content .editorcss tbody tr:nth-child(2n) td   ->  (0,3,3)

   which zebra-stripes every table row. Our component rules are (0,1,1)-(0,2,1)
   and lose outright, so the spec table would render with alternating grey rows
   we never asked for.

   Two defenses, deliberately both:
     a) selectors below reach (0,4,x) so they win on specificity alone;
     b) `!important` on the exact properties Platinum sets, because a future
        framework version could raise its own specificity again.

   Same posture the backend already takes -- see _force_full_width_tables in
   long_desc_templates.py, which exists because themes ship
   `table { width: auto !important }`.

   Scope is limited to `.esh-*` roots, so nothing here affects hand-written
   descriptions on existing products.
   ============================================================================ */
.esh-pdx.esh-pdx table,
.esh-pdx.esh-pdx thead,
.esh-pdx.esh-pdx tbody,
.esh-pdx.esh-pdx tr,
.esh-art.esh-art table,
.esh-art.esh-art tbody,
.esh-art.esh-art tr{background:transparent !important;background-color:transparent !important}

/* Row striping must come from US, not from the framework. `tr:nth-child(n)`
   adds a class-level unit, taking these past Platinum's (0,3,3). */
.esh-pdx.esh-pdx .esh-specs tbody tr:nth-child(n) th{background:#fafbfc !important}
.esh-pdx.esh-pdx .esh-specs tbody tr:nth-child(n) td{background:#fff !important}

/* Cell padding/borders are ours too -- the framework sets its own. */
.esh-pdx.esh-pdx .esh-specs tbody tr:nth-child(n) th,
.esh-pdx.esh-pdx .esh-specs tbody tr:nth-child(n) td{
  border:0 !important;border-bottom:1px solid var(--esh-line-2) !important}
.esh-pdx.esh-pdx .esh-specs tbody tr:last-child th,
.esh-pdx.esh-pdx .esh-specs tbody tr:last-child td{border-bottom:0 !important}

/* Lists inside .editorcss get framework bullets/indents; ours are custom. */
.esh-pdx.esh-pdx ul,
.esh-pdx.esh-pdx ol{list-style:none !important;margin:0;padding:0}

/* -- shared tokens --------------------------------------------------------- */
.esh-art,
.esh-pdx{
  /* == THE ONE INPUT ==========================================================
     A shop sets its brand colour ONCE, anywhere above this content:

         :root { --esh-brand: #c2185b; }

     ...or by chaining an existing Platinum theme variable:

         :root { --esh-brand: var(--site-primary, #0b5fd4); }

     Every accent below -- hover, tint, progress gradient, CTA glow, CTA eyebrow,
     tip callout -- is DERIVED from it. Nothing else needs editing per shop, and
     no shop inherits our blue unless it wants to.
     =========================================================================== */
  /* We never DECLARE --esh-brand: declaring it here would beat the shop's own
     :root value (an element's own declaration wins over an inherited one).
     We only ever consume it, with our blue as the last-resort fallback. */
  --esh-acc:var(--esh-brand, #0b5fd4);
  /* Pre-color-mix fallbacks. These deliberately fall back to the BRAND (or to a
     neutral), never to blue -- an old browser then renders on-brand but flat,
     instead of correct-looking-but-wrong-colour. Overridden in @supports below. */
  --esh-acc-hover:var(--esh-acc);
  --esh-acc-soft:#eef1f5;
  --esh-acc-2:var(--esh-acc);
  --esh-glow:transparent;
  --esh-tip-bg:#f4f6f8; --esh-tip-line:#e3e8ee; --esh-tip-ink:#33445c;
  --esh-cta-eyebrow:#fff;

  /* CTA surface is its own knob so a shop can go brand-dark instead of navy. */
  --esh-cta-bg:#0f172a; --esh-cta-ink:#fff; --esh-cta-sub:#c3ccd9;

  /* Foreground for anything sitting ON the brand colour (button label, tick
     glyphs). Defaults to white; esh-templates.js flips it to ink when the shop
     picks a LIGHT brand, so a yellow/lime storefront doesn't get white-on-white. */
  --esh-on-brand:#fff;
  --esh-ink:#0f172a; --esh-body:#33445c; --esh-muted:#5b6b7f; --esh-muted-2:#7a8aa0;
  --esh-line:#e3e8ee; --esh-line-2:#eef1f5;
  --esh-surface:#f8fafc; --esh-surface-2:#fbfcfd;
  --esh-ok-bg:#f5fbf6; --esh-ok-line:#d7ead9; --esh-ok-ink:#14532d; --esh-ok-mark:#1a7f37;
  --esh-no-bg:#fdf8f5; --esh-no-line:#e9dcd6; --esh-no-ink:#7c2d12; --esh-no-mark:#b45309;
  --esh-radius:14px; --esh-radius-lg:16px; --esh-radius-cta:18px;

  /* Height of whatever the SITE pins to the top of the viewport (Platinum's
     #sticky_header, a fixed nav, a promo bar...). Everything sticky below adds
     it, so our chrome never slides under the site's. Measured at runtime by
     esh-templates.js; 0 when there is nothing pinned. A shop can also hardcode
     it: .esh-art { --esh-sticky-top: 64px }. */
  --esh-sticky-top:0px;

  /* Font is declared ONCE, here. Set to `inherit` so the block adopts whatever
     the site puts on html/body; override this single line to pin a face. */
  font-family:inherit;
  color:var(--esh-ink);
  line-height:1.62;
  text-align:right;
  text-wrap:pretty;
}

/* Derived accents. Gated on @supports because custom properties swallow unknown
   functions at parse time and would otherwise break the consuming declaration. */
@supports (color: color-mix(in srgb, red 50%, #fff)){
  .esh-art,
  .esh-pdx{
    --esh-acc-hover:color-mix(in srgb, var(--esh-acc) 78%, #000);
    --esh-acc-soft:color-mix(in srgb, var(--esh-acc) 12%, #fff);
    --esh-acc-2:color-mix(in srgb, var(--esh-acc) 62%, #fff);
    --esh-glow:color-mix(in srgb, var(--esh-acc) 50%, transparent);
    --esh-tip-bg:color-mix(in srgb, var(--esh-acc) 9%, #fff);
    --esh-tip-line:color-mix(in srgb, var(--esh-acc) 26%, #fff);
    --esh-tip-ink:color-mix(in srgb, var(--esh-acc) 72%, #000);
    --esh-cta-eyebrow:color-mix(in srgb, var(--esh-acc) 42%, #fff);
  }
}

/* One inherited font for every descendant, immune to `td{font-family:X!important}`
   style theme rules. This is the only blanket !important in the file. */
.esh-art *,
.esh-pdx *{box-sizing:border-box}
/* (0,3,0) -- must outrank `.product_product_content .editorcss h3 {font-family:...!important}` (0,2,1) */
.esh-art.esh-art.esh-art *,
.esh-pdx.esh-pdx.esh-pdx *{font-family:inherit !important}

.esh-art a,
.esh-pdx a{text-decoration:none}
/* Accent belongs to bare content links only. A generic `.esh-art a{color:...}`
   would be (0,2,0) and would silently outrank every component class below. */
.esh-art__main a:not([class]),
.esh-pdx a:not([class]){color:var(--esh-acc)}
.esh-art__main a:not([class]):hover,
.esh-pdx a:not([class]):hover{color:var(--esh-acc-hover)}

.esh-eyebrow{font-size:13px;font-weight:800;letter-spacing:.06em;color:var(--esh-muted);display:block}

/* ============================================================================
   ARTICLE
   ============================================================================ */
.esh-art{background:#fff}

/* PT15 is a self-contained shell: no reading-progress strip (the external
   Platinum widgets are suppressed and the progress element is no longer
   emitted). The old .esh-art__progress / .esh-art__progress-bar rules are gone
   because the element they styled no longer exists on any page. */

.esh-art__shell{max-width:1200px;margin:0 auto;display:grid;
  grid-template-columns:300px minmax(0,1fr);gap:46px;padding:0 30px 60px}

.esh-art__side{position:sticky;top:calc(var(--esh-sticky-top) + 26px);align-self:start;display:grid;gap:16px;padding-top:30px;
  max-height:calc(100vh - var(--esh-sticky-top) - 52px);overflow-y:auto;
  scrollbar-width:none;-ms-overflow-style:none}
.esh-art__side::-webkit-scrollbar{width:0;height:0;display:none}
.esh-art__main{padding:30px 0 0;max-width:760px;min-width:0}
.esh-art__main h2{scroll-margin-top:calc(var(--esh-sticky-top) + 90px)}

/* ============================================================================
   ARTICLE TABLES -- AI-generated + seller-pasted tables inside the article body.
   Mirrors the product .esh-specs look (header background, zebra rows, hairlines).
   Wrapped in .esh-table-wrap -- emitted by the SEO transform and added at runtime
   by esh-templates.js for pasted tables -- so wide tables scroll horizontally on
   mobile instead of breaking the column. Scope stays under .esh-art / .esh-*.
   ============================================================================ */
.esh-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--esh-line);border-radius:var(--esh-radius);margin:0 0 28px}
/* width:100% !important beats themes that ship `table{width:auto!important}`;
   min-width keeps columns from crushing before the wrapper starts scrolling. */
.esh-art.esh-art.esh-art .esh-table,
.esh-art.esh-art.esh-art .esh-art__main table{width:100% !important;border-collapse:collapse !important;
  font-size:16px;min-width:460px}
.esh-art__main table th,
.esh-table th{text-align:right;font-weight:700;color:var(--esh-ink);background:#fafbfc;
  padding:12px 16px;border-bottom:1px solid var(--esh-line)}
.esh-art__main table td,
.esh-table td{padding:11px 16px;border-bottom:1px solid var(--esh-line-2);color:var(--esh-body)}
.esh-art__main table tr:last-child td,
.esh-table tr:last-child td{border-bottom:0}
/* zebra -- must outrank BOTH Platinum's framework striping (the nth-child unit
   pushes this past the framework's own selector) and our ARMOR transparency
   at the top of the file (hence !important). */
.esh-art.esh-art .esh-art__main table tbody tr:nth-child(2n) td,
.esh-art.esh-art .esh-table tbody tr:nth-child(2n) td{background:var(--esh-surface) !important}

.esh-card{border:1px solid var(--esh-line);border-radius:var(--esh-radius-lg);background:var(--esh-surface-2)}
.esh-card--plain{background:transparent}

/* -- TOC ------------------------------------------------------------------- */
.esh-toc{padding:18px}
.esh-toc__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.esh-toc__pct{font-size:12.5px;font-weight:700;color:var(--esh-acc)}
.esh-toc__list{margin:0;padding:0;list-style:none;display:grid;gap:2px}
.esh-toc__link{display:grid;grid-template-columns:14px 1fr;gap:10px;align-items:center;padding:7px 10px;
  border-radius:9px;font-size:15px;line-height:1.35;font-weight:500;color:var(--esh-body);
  -webkit-tap-highlight-color:transparent}
.esh-toc__link::before{content:"";width:6px;height:6px;border-radius:50%;
  margin-inline-start:4px;background:#c8d1dd;transition:background .18s ease}
.esh-toc__link:hover{background:var(--esh-line-2)}
.esh-toc__link.is-active{font-weight:700;color:var(--esh-acc);background:var(--esh-acc-soft)}
.esh-toc__link.is-active::before{background:var(--esh-acc)}

/* Mobile burger header. Hidden here so the DESKTOP TOC is open unconditionally
   and never depends on JS having run. */
/* `all:unset` MUST come first -- it resets `display` to its initial value, so a
   `display:none` declared before it is silently wiped and the burger leaks
   onto desktop. */
.esh-toc__burger{all:unset;display:none;box-sizing:border-box;cursor:pointer;width:100%;
  padding:14px 18px;align-items:center;gap:10px;text-align:right;
  -webkit-tap-highlight-color:transparent}
.esh-toc__burger .esh-toc__pct{margin-inline-start:auto}
/* No loud accent outline on tap. Keyboard focus gets a subtle grey wash instead;
   the burger->X transform already signals the open/focused state visually. */
.esh-toc__burger:focus{outline:none}
.esh-toc__burger:focus-visible{outline:none;background:var(--esh-line-2)}
.esh-toc__bars{display:grid;gap:3px;width:16px;flex:none}
.esh-toc__bars span{display:block;height:2px;background:var(--esh-acc);border-radius:2px;
  transform-origin:center;transition:transform .3s ease,opacity .2s ease}
/* burger -> X when the TOC is open (toggle animation) */
.esh-toc.is-open .esh-toc__bars span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.esh-toc.is-open .esh-toc__bars span:nth-child(2){opacity:0}
.esh-toc.is-open .esh-toc__bars span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.esh-toc__chev{width:7px;height:7px;flex:none;border-inline-end:2px solid var(--esh-muted);
  border-bottom:2px solid var(--esh-muted);transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .22s ease}
.esh-toc__burger[aria-expanded="true"] .esh-toc__chev{transform:rotate(225deg) translate(-2px,-2px)}

/* -- share ----------------------------------------------------------------- */
.esh-share{padding:16px 18px;display:grid;gap:12px}
.esh-share__row{display:flex;align-items:center;gap:10px}
/* grid+place-items centres the glyph exactly; `line-height:0` kills the text
   baseline gap that made the old character icon sit a pixel high. */
.esh-share__btn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  flex:none;border:0;cursor:pointer;padding:0;line-height:0;color:#fff;
  transition:background .2s ease,color .2s ease,filter .2s ease}
.esh-share__btn svg{width:19px;height:19px;display:block;fill:currentColor;grid-area:1/1}
.esh-share__btn--wa{background:#25d366}
.esh-share__btn--fb{background:#1877f2}
.esh-share__btn--copy{background:var(--esh-line-2);color:var(--esh-muted)}
.esh-share__btn:hover{filter:brightness(.93)}
/* Icon-only feedback: the check replaces the link glyph, no text label. Both
   SVGs share one grid cell so the button never reflows on swap. */
.esh-share__ico--done{opacity:0;transform:scale(.6);transition:opacity .18s ease,transform .18s ease}
.esh-share__ico--copy{opacity:1;transform:scale(1);transition:opacity .18s ease,transform .18s ease}
.esh-share__btn--copy.is-done{background:var(--esh-ok-mark);color:#fff;filter:none}
.esh-share__btn--copy.is-done .esh-share__ico--copy{opacity:0;transform:scale(.6)}
.esh-share__btn--copy.is-done .esh-share__ico--done{opacity:1;transform:scale(1)}

/* -- related --------------------------------------------------------------- */
.esh-rel{padding:16px 18px;display:grid;gap:14px}
.esh-rel__item{display:grid;grid-template-columns:76px 1fr;gap:12px;align-items:center}
.esh-rel__thumb{border-radius:10px;aspect-ratio:16/9;display:block;object-fit:cover;
  background:var(--esh-line-2)}
.esh-rel__meta{display:grid;gap:2px}
.esh-rel__title{font-size:15px;font-weight:700;line-height:1.35;color:var(--esh-ink)}
.esh-rel__item:hover .esh-rel__title{color:var(--esh-acc-hover)}
.esh-rel__time{font-size:13px;color:var(--esh-muted-2)}

/* -- article body ---------------------------------------------------------- */
.esh-art__header{display:grid;gap:14px;padding-bottom:22px}
.esh-meta{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:13.5px;
  color:var(--esh-muted-2);line-height:1.4}
.esh-meta__break{display:none}
.esh-pill{background:var(--esh-acc-soft);color:var(--esh-acc);font-weight:700;padding:4px 12px;border-radius:999px}
.esh-art__title{margin:0;font-size:43px;line-height:1.08;font-weight:800;letter-spacing:-.03em}
.esh-lede.esh-lede{margin:0;font-size:20px;line-height:1.5;color:var(--esh-body)}

.esh-fig{margin:0 0 28px;display:grid;gap:9px}
.esh-fig--inline{margin:26px 0 28px}

/* -- PT15 article hero (the real generated main image) ----------------------
   NOT the .esh-fig__box placeholder below: the hero is just the image. No box,
   no striped background, no fixed aspect-ratio, no rounded corners. Full column
   width at the image's natural aspect. !important on the sizing defeats any
   storefront `img{width/height}` theme rule that would stretch it. */
.esh-art__hero{margin:0 0 26px;padding:0}
.esh-art__hero img{display:block;width:100% !important;height:auto !important;
  max-width:100% !important;border:0;border-radius:0;background:none}
/* Real content: just the image. No striped placeholder background, no fixed 1024/460 aspect
   (which cropped/letterboxed the real ~1024x300 header), no rounded box. This also cleans up
   any already-published article whose hero still uses the .esh-fig__box markup. */
.esh-fig__box{overflow:hidden;display:block}
.esh-fig__box img{width:100% !important;height:auto !important;display:block;border:0}
.esh-fig__ph{font-size:12.5px;color:#6b7a8f;background:#fff;border:1px solid #dfe5ec;
  border-radius:6px;padding:6px 12px}
.esh-fig figcaption{font-size:13.5px;color:var(--esh-muted-2);line-height:1.4}

.esh-key{border:1px solid var(--esh-line);background:var(--esh-surface);
  border-radius:var(--esh-radius-lg);padding:22px 24px;margin-bottom:30px;display:grid;gap:12px}
.esh-key .esh-eyebrow{color:var(--esh-acc)}
.esh-key ul{margin:0;padding:0;list-style:none;display:grid;gap:9px;font-size:16.5px;line-height:1.5}
.esh-key li{display:grid;grid-template-columns:22px 1fr;gap:10px}
.esh-key li::before{content:"\2713";color:var(--esh-acc);font-weight:800}

.esh-art__main h2{margin:0 0 12px;font-size:29px;line-height:1.2;font-weight:800;letter-spacing:-.02em}
.esh-art__main p{margin:0 0 14px;font-size:18px;line-height:1.62}

.esh-quote{margin:24px 0 28px;border-inline-start:4px solid var(--esh-acc);
  background:var(--esh-surface-2);border-radius:0 var(--esh-radius) var(--esh-radius) 0;
  padding:20px 22px;display:grid;gap:8px}
.esh-quote.esh-quote p{margin:0;font-size:19px;font-weight:600;line-height:1.45}
.esh-quote cite{font-size:14px;color:var(--esh-muted);font-weight:600;font-style:normal}

/* ============================================================================
   FAQ -- one component, identical in articles and products
   ============================================================================ */
.esh-faq{border:1px solid var(--esh-line);border-radius:var(--esh-radius-lg);
  overflow:hidden;margin-bottom:32px}
.esh-faq__item + .esh-faq__item{border-top:1px solid var(--esh-line-2)}
.esh-faq__q{all:unset;box-sizing:border-box;cursor:pointer;width:100%;padding:17px 20px;
  font-size:17.5px;font-weight:700;color:var(--esh-ink);display:flex;
  justify-content:space-between;gap:14px;align-items:center;text-align:right}
.esh-faq__q:hover{background:var(--esh-surface-2)}
.esh-faq__q:focus-visible{outline:2px solid var(--esh-acc);outline-offset:-2px}
.esh-faq__q::after{content:"+";color:var(--esh-acc);font-size:22px;font-weight:800;line-height:1;
  flex:none;display:inline-block;transition:transform .25s ease}
.esh-faq__q[aria-expanded="true"]::after{transform:rotate(135deg)}
.esh-faq__a{padding:0 20px 18px;font-size:16.5px;line-height:1.6;color:var(--esh-body)}
.esh-faq__a[hidden]{display:none}
/* No-JS fallback: if the script never runs, every answer stays visible rather
   than permanently hidden. */
.esh-faq:not([data-ready]) .esh-faq__a{display:block}

/* ============================================================================
   CTA -- one component, identical in articles and products
   ============================================================================ */
.esh-cta{background:var(--esh-cta-bg);border-radius:var(--esh-radius-cta);padding:34px;
  display:grid;gap:14px;justify-items:start;position:relative;overflow:hidden}
.esh-cta::after{content:"";position:absolute;inset:auto -60px -120px auto;width:300px;height:300px;
  background:radial-gradient(circle,var(--esh-glow),transparent 65%);pointer-events:none}
.esh-cta > *{position:relative;z-index:1}
.esh-cta.esh-cta .esh-cta__eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.08em;color:var(--esh-cta-eyebrow)}
.esh-cta.esh-cta h3{margin:0;font-size:27px;line-height:1.2;font-weight:800;color:var(--esh-cta-ink);
  letter-spacing:-.02em;max-width:26ch}
.esh-cta.esh-cta p{margin:0;font-size:16.5px;line-height:1.5;color:var(--esh-cta-sub);max-width:52ch}
.esh-cta.esh-cta .esh-cta__btn{background:var(--esh-acc);color:var(--esh-on-brand);font-size:17px;font-weight:700;
  padding:14px 32px;border-radius:11px;margin-top:4px;display:inline-block}
.esh-cta.esh-cta .esh-cta__btn:hover{background:var(--esh-acc-hover);color:var(--esh-on-brand)}

/* ============================================================================
   PRODUCT
   ============================================================================ */
.esh-pdx{max-width:860px;margin:0 auto;background:#fff}
.esh-pdx > * + *{margin-top:30px}
.esh-pdx__sec{padding:0 24px}
.esh-pdx__sec:first-child{padding-top:32px}
.esh-pdx__sec:last-child{padding-bottom:44px}
.esh-pdx h3{margin:0 0 14px;font-size:25px;line-height:1.2;font-weight:800;letter-spacing:-.015em}
.esh-pdx h4{margin:0 0 10px;font-size:19px;font-weight:800}
.esh-pdx p{margin:0 0 14px;font-size:17.5px;line-height:1.6;color:var(--esh-body)}

.esh-pdx__kicker{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.esh-pdx__rule{width:32px;height:3px;background:var(--esh-acc);border-radius:2px;display:block}
.esh-pdx__kicker .esh-eyebrow{color:var(--esh-acc);font-size:13.5px;font-weight:700}
.esh-pdx__title{margin:0 0 14px;font-size:34px;line-height:1.15;font-weight:800;letter-spacing:-.025em}
.esh-pdx__lede.esh-pdx__lede{margin:0 0 14px;font-size:20px;line-height:1.5;color:var(--esh-body)}

.esh-pills{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.esh-pills li{font-size:13.5px;font-weight:600;color:var(--esh-body);background:#f4f6f8;
  border:1px solid var(--esh-line);border-radius:999px;padding:5px 14px}

.esh-feat{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.esh-feat li{display:grid;grid-template-columns:25px 1fr;gap:12px;align-items:start;
  font-size:17.5px;line-height:1.5}
.esh-feat li::before{content:"\2713";width:25px;height:25px;border-radius:50%;
  background:var(--esh-acc);color:var(--esh-on-brand);display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800}

/* auto-fit gives a true 4->2->1 reflow with no orphan and no media query */
.esh-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px;
  margin:0;padding:0;list-style:none}
.esh-cards li{background:#fff;border:1px solid var(--esh-line);border-radius:var(--esh-radius);
  padding:18px;display:grid;gap:6px;align-content:start;transition:box-shadow .18s ease}
.esh-cards li:hover{box-shadow:0 10px 24px rgba(15,23,42,.08)}
.esh-cards__ico{font-size:27px;line-height:1}
.esh-cards__t{font-size:17.5px;font-weight:800;letter-spacing:-.01em}
.esh-cards__d{font-size:15px;line-height:1.45;color:var(--esh-muted)}

.esh-tip.esh-tip{display:flex;gap:10px;align-items:flex-start;background:var(--esh-tip-bg);
  border:1px solid var(--esh-tip-line);border-radius:12px;padding:14px 16px;
  font-size:15.5px;line-height:1.55;color:var(--esh-tip-ink)}
.esh-tip__ico{font-size:19px;line-height:1.4;flex:none}

.esh-specs{border:1px solid var(--esh-line);border-radius:var(--esh-radius);overflow:hidden}
.esh-pdx.esh-pdx.esh-pdx .esh-specs table{width:100% !important;border-collapse:collapse !important;font-size:16.5px}
.esh-specs th{text-align:right;font-weight:600;color:var(--esh-muted);padding:12px 18px;
  border-bottom:1px solid var(--esh-line-2);width:42%;background:#fafbfc}
.esh-specs td{padding:12px 18px;border-bottom:1px solid var(--esh-line-2);font-weight:600}
.esh-specs tr:last-child th,.esh-specs tr:last-child td{border-bottom:0}

.esh-fit{border-radius:var(--esh-radius);padding:20px 22px}
.esh-fit + .esh-fit{margin-top:12px}
.esh-fit ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:16.5px;line-height:1.5}
.esh-fit li{display:grid;grid-template-columns:18px 1fr;gap:10px}
.esh-fit li::before{font-weight:800}
.esh-fit--yes{background:var(--esh-ok-bg);border:1px solid var(--esh-ok-line)}
.esh-fit--yes h4{color:var(--esh-ok-ink)}
.esh-fit--yes ul{color:#24402c}
.esh-fit--yes li::before{content:"\2713";color:var(--esh-ok-mark)}
.esh-fit--no{background:var(--esh-no-bg);border:1px solid var(--esh-no-line)}
.esh-fit--no h4{color:var(--esh-no-ink)}
.esh-fit--no ul{color:#4a2a1c}
.esh-fit--no li::before{content:"\2013";color:var(--esh-no-mark)}

.esh-box{margin:0;padding:0;list-style:none;border:1px solid var(--esh-line);
  border-radius:var(--esh-radius);overflow:hidden;font-size:16.5px}
.esh-box li{padding:12px 18px;display:flex;gap:10px;align-items:center}
.esh-box li + li{border-top:1px solid var(--esh-line-2)}

.esh-steps{margin:0;padding:0;list-style:none;display:grid;gap:10px;counter-reset:esh-step}
.esh-steps li{display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:start;
  font-size:16.5px;line-height:1.55;color:var(--esh-body)}
.esh-steps li::before{counter-increment:esh-step;content:counter(esh-step);
  width:32px;height:32px;border-radius:9px;background:var(--esh-acc-soft);color:var(--esh-acc);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15.5px}
.esh-steps strong{color:var(--esh-ink)}

.esh-care{background:var(--esh-surface);border:1px solid var(--esh-line);
  border-radius:var(--esh-radius-lg);padding:22px 24px}
.esh-care.esh-care h3{font-size:22px}
.esh-care__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;
  margin:0;padding:0;list-style:none}
.esh-care__grid li{display:grid;gap:5px;align-content:start}
.esh-care__ico{font-size:21px;line-height:1}
.esh-care__t{font-size:16.5px;font-weight:700}
.esh-care__d{font-size:15px;line-height:1.45;color:var(--esh-muted)}

/* -- responsive ------------------------------------------------------------ */
@media (max-width:1000px){
  .esh-art__shell{grid-template-columns:1fr;gap:0;padding:0}

  /* The aside dissolves so its three cards become orderable children of the
     shell. The wrapper then BRACKETS the editable region:
        1 TOC (burger)  2 share  |  3 PageContent  |  4 related (footer)
     Only 3 is the seller-editable full-description content. */
  .esh-art__side{display:contents}

  /* 1 -- TOC as a sticky app bar under the progress strip */
  /* Flush under the site's sticky header: top = measured header height, no extra gap.
     (--esh-sticky-top is set at runtime by esh-templates.js; it is 0 only if the stale
     pre-4.7.10 JS is still cached -- bump get_version so the fresh JS is fetched.) */
  .esh-toc{order:1;position:sticky;top:var(--esh-sticky-top);z-index:30;padding:0;background:#fff;
    border-radius:0;border-inline:0;border-top:0;border-bottom:1px solid var(--esh-line)}
  .esh-toc__head{display:none}
  .esh-toc__burger{display:flex}
  /* Animated open/close: max-height + opacity transition (display can't animate). Collapsed by
     default; is-open reveals it. overflow hidden during the slide, auto (scroll) when open. */
  .esh-toc__list{display:grid;max-height:0;opacity:0;overflow:hidden;padding:0 18px;
    transition:max-height .32s ease,opacity .25s ease,padding .32s ease;
    scrollbar-width:none;-ms-overflow-style:none}
  .esh-toc__list::-webkit-scrollbar{width:0;display:none}
  .esh-toc.is-open .esh-toc__list{max-height:60vh;opacity:1;padding:4px 18px 14px;overflow-y:auto}

  /* The bars already signal "tap to open" -- the chevron is redundant here. */
  .esh-toc__chev{display:none}

  /* 2 -- share: label + buttons on ONE line, the pair centred as a group.
     `margin-inline-start:auto` on the label is removed so it sits tight against
     the buttons rather than being pushed to the far edge. */
  .esh-share{order:2;margin:14px 18px 0;border:1px solid var(--esh-line);
    border-radius:var(--esh-radius-lg);padding:12px 16px;
    display:flex;flex-direction:row;align-items:center;justify-content:center;gap:12px}
  .esh-share .esh-eyebrow{flex:none}

  /* 3 -- category chip alone on line 1 (right-aligned, free space to its left);
     date / read time / author wrap to line 2. */
  .esh-meta__break{display:block;flex:0 0 100%;height:0;margin:0}

  /* 3 -- the editable content */
  .esh-art__main{order:3;padding:22px 18px 0;max-width:none}
  .esh-art__title{font-size:31px}

  /* 4 -- related becomes a full-bleed footer of the wrapper, after the CTA.
     Distinct surface so it reads as chrome, not as article content. */
  .esh-rel{order:4;margin:36px 0 0;padding:22px 18px 32px;
    background:#f4f6f8;border:0;border-top:1px solid var(--esh-line);border-radius:0}
}
@media (max-width:560px){
  .esh-art__title{font-size:27px}
  .esh-lede,.esh-pdx__lede{font-size:17.5px}
  .esh-art__main p{font-size:16.5px}
  .esh-art__main h2{font-size:24px}
  .esh-pdx__title{font-size:29px}
  .esh-pdx__sec{padding:0 18px}
  .esh-cta{padding:26px}
  .esh-cta h3{font-size:23px}
}
@media (prefers-reduced-motion:reduce){
  .esh-art *,.esh-pdx *{transition:none !important;scroll-behavior:auto !important}
}
@media print{
  .esh-art__side{display:none}
  .esh-art__shell{grid-template-columns:1fr}
  .esh-faq__a[hidden]{display:block}
}