/* ==========================================================================
   EarnCart · Store Template — "Template 1"  (template id: furniture)
   --------------------------------------------------------------------------
   EVERY selector is scoped under .ect-furniture. Two reasons this is strict:

   1. styles.css styles the marketplace in a DARK theme and uses bare element
      selectors (nav {...}, input {...}) plus a global *{font-family:Poppins}.
      A storefront that renders inside the SPA inherits all of it, which is
      exactly how a previous template ended up with a 147px gradient block
      where a breadcrumb should have been.
   2. The seller cannot edit any of this. One file = one look = every store on
      this template is visually identical apart from its own content.

   The product card keeps its marketplace DOM (.product-card / .cart-btn /
   .wish-btn / .product-price / .product-member-price). We RESTYLE it here, we
   never hide any of it — suppressing the rating or the member price on a page
   EarnCart owns is a bug, not a design choice.
   ========================================================================== */

.ect-furniture {
  /* ---- design tokens (fixed; the seller cannot change any of these) ---- */
  --ectf-ink: #0B0D12;
  --ectf-ink-2: #3D4453;
  --ectf-ink-3: #6B7280;
  --ectf-line: #E8EAF0;
  --ectf-line-soft: #F1F2F7;
  --ectf-bg: #FFFFFF;
  --ectf-bg-soft: #F7F8FB;

  /* ---- SKIN surface tokens -------------------------------------------------
     Every panel, card, input and hairline in the file below is written against
     one of these instead of a hex literal. That is what lets a SKIN (see
     skins.css) repaint the whole template — including the fully dark ones —
     without touching a single layout rule. A skin overrides tokens; it never
     overrides a selector. */
  --ectf-surface: #FFFFFF;        /* cards, panels, inputs, sticky bars       */
  --ectf-line-2: #C9CEDD;         /* hover / stronger hairline                */
  --ectf-line-3: #DDE0E9;         /* empty stars, meter tracks                */
  --ectf-ink-solid: #0B0D12;      /* the dark "Buy now" fill                  */
  --ectf-ink-solid-hover: #1B1F2A;
  --ectf-glass: rgba(255, 255, 255, .82);      /* the hero card over the banner */
  --ectf-glass-line: rgba(255, 255, 255, .9);
  --ectf-font-head: inherit;      /* skins with serif headings override this  */
  /* Body face. A token rather than a literal so a skin can change it without
     a layout rule — see the licensing note at the top of skins.css for why
     two of the reference designs ship a look-alike here instead of the
     original face. */
  --ectf-font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* ACCENT. These five are the ONLY tokens the store palette moves (see
     furniture.js accentVars). Everything tinted below is written as
     rgba(var(--ectf-g1-rgb), …) rather than a hex literal, so setting the two
     -rgb pairs on the root element recolours the whole template at once. The
     seller still picks from a fixed list of palettes — never a free colour
     picker — so no store can produce an unreadable or off-brand look. */
  --ectf-g1: #6C63FF;
  --ectf-g2: #4F8CFF;
  --ectf-g1-rgb: 108, 99, 255;
  --ectf-g2-rgb: 79, 140, 255;
  /* THE ACCENT HAS TWO JOBS AND THEY NEED DIFFERENT COLOURS.
     Until the lime templates arrived, --ectf-g1 did both: it filled buttons
     (with #fff text baked in) AND it coloured text on the page background. All
     thirteen palettes are mid-to-dark, so both happened to work.

     Lime (#DEF02A) breaks the assumption at both ends — white on lime is
     unreadable, and lime text on white is worse. So the two jobs are now two
     tokens, and any skin whose accent is light MUST set both:

       --ectf-on-accent   what is drawn ON an accent fill  (default: white)
       --ectf-accent-ink  the accent used AS text on the page (default: itself)

     Left as-is, both keep the exact behaviour the first ten shipped with.

     This matters beyond the templates: the seller's chosen action colour is
     written inline over --ectf-g1/-g2, so a seller who picks a pale palette
     hits the same problem. resolveAccent() snapping to thirteen vetted
     palettes is what keeps that safe today. */
  --ectf-on-accent: #fff;
  --ectf-accent-ink: var(--ectf-g1);

  --ectf-grad: linear-gradient(135deg, var(--ectf-g1) 0%, var(--ectf-g2) 100%);
  --ectf-grad-soft: linear-gradient(135deg, rgba(var(--ectf-g1-rgb), .10) 0%, rgba(var(--ectf-g2-rgb), .10) 100%);
  --ectf-gold: #B98A2E;
  --ectf-green: #0E9F6E;
  --ectf-red: #E0245E;

  --ectf-r-lg: 24px;
  --ectf-r-md: 16px;
  --ectf-r-sm: 12px;
  --ectf-r-pill: 999px;

  /* 8px grid */
  --ectf-s1: 8px;
  --ectf-s2: 16px;
  --ectf-s3: 24px;
  --ectf-s4: 32px;
  --ectf-s5: 48px;
  --ectf-s6: 64px;
  --ectf-s7: 96px;

  --ectf-sh-sm: 0 1px 2px rgba(11, 13, 18, .04), 0 4px 12px rgba(11, 13, 18, .04);
  --ectf-sh-md: 0 2px 4px rgba(11, 13, 18, .04), 0 12px 32px rgba(11, 13, 18, .07);
  --ectf-sh-lg: 0 8px 24px rgba(11, 13, 18, .06), 0 32px 64px rgba(11, 13, 18, .10);
  --ectf-sh-brand: 0 8px 24px rgba(var(--ectf-g1-rgb), .28);

  --ectf-ease: cubic-bezier(.22, 1, .36, 1);

  background: var(--ectf-bg);
  color: var(--ectf-ink);
  font-family: var(--ectf-font-body, 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  width: 100%;
  overflow-x: hidden;
}

/* The site sets *{font-family:'Poppins'} with specificity 0, so one class rule
   is enough to take the whole subtree back. */
.ect-furniture *,
.ect-furniture *::before,
.ect-furniture *::after {
  font-family: inherit;
  box-sizing: border-box;
}

.ect-furniture h1,
.ect-furniture h2,
.ect-furniture h3,
.ect-furniture h4 {
  font-family: var(--ectf-font-head, inherit);
  color: var(--ectf-ink);
  letter-spacing: -0.025em;
  line-height: 1.15;
  font-weight: 700;
}
.ect-furniture h1 { font-size: clamp(28px, 3.4vw, 44px); }
.ect-furniture h2 { font-size: clamp(22px, 2.4vw, 32px); }
.ect-furniture h3 { font-size: 18px; }
.ect-furniture p { color: var(--ectf-ink-2); }
.ect-furniture img { max-width: 100%; display: block; }
.ect-furniture button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
.ect-furniture :focus-visible { outline: 2px solid var(--ectf-g1); outline-offset: 3px; border-radius: 6px; }

/* ---------------------------------------------------------- element reset
   REQUIRED, not tidiness. styles.css styles bare ELEMENTS — `nav{}`,
   `footer{}`, `section{}`, `input{}` — for the dark marketplace chrome, and a
   class only beats an element selector for the properties it actually states.
   So a <footer class="ec-store-foot"> silently inherited flex-direction:column
   from `footer{}` and stacked the locked EarnCart links vertically, and every
   <section> here inherited `padding:110px 56px`.

   These selectors are (0,1,1) so they beat the bare element rules, while every
   component rule below is (0,2,0)+ and still beats these. Anything added to
   this template later is protected by default instead of inheriting the dark
   theme one property at a time. */
.ect-furniture header,
.ect-furniture footer,
.ect-furniture nav,
.ect-furniture section,
.ect-furniture article,
.ect-furniture aside,
.ect-furniture form,
.ect-furniture figure {
  position: static;
  display: block;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  border-radius: 0;
  text-align: left;
  z-index: auto;
  box-shadow: none;
}
.ect-furniture input,
.ect-furniture select,
.ect-furniture textarea {
  width: auto;
  margin: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.ect-furniture ul,
.ect-furniture ol { list-style: none; margin: 0; padding: 0; }
.ect-furniture table { border-collapse: collapse; width: auto; }

.ect-furniture .ectf-muted { color: var(--ectf-ink-3); }
.ect-furniture .ectf-hidden-src { display: none !important; }

/* 12-column canvas, 1440 max, generous gutters */
.ect-furniture .ectf-shell {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--ectf-s4);
}

/* ---------------------------------------------------------------- buttons */

.ect-furniture .ectf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ectf-s1);
  height: 48px;
  padding: 0 var(--ectf-s3);
  border-radius: var(--ectf-r-pill);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform .28s var(--ectf-ease), box-shadow .28s var(--ectf-ease),
              background-color .2s ease, color .2s ease, border-color .2s ease;
}
.ect-furniture .ectf-btn svg { width: 17px; height: 17px; }
.ect-furniture .ectf-btn--primary {
  background: var(--ectf-grad);
  color: var(--ectf-on-accent);
  box-shadow: var(--ectf-sh-brand);
}
.ect-furniture .ectf-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(var(--ectf-g1-rgb), .38); }
.ect-furniture .ectf-btn--primary:active { transform: translateY(0); }
.ect-furniture .ectf-btn--buy {
  background: var(--ectf-ink-solid);
  color: #fff;
  box-shadow: var(--ectf-sh-md);
}
.ect-furniture .ectf-btn--buy:hover { transform: translateY(-2px); background: var(--ectf-ink-solid-hover); }
.ect-furniture .ectf-btn--ghost {
  background: var(--ectf-glass);
  color: var(--ectf-ink);
  border: 1px solid var(--ectf-line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.ect-furniture .ectf-btn--ghost:hover { transform: translateY(-2px); border-color: var(--ectf-line-2); box-shadow: var(--ectf-sh-sm); }
.ect-furniture .ectf-btn.is-following { background: var(--ectf-ink); box-shadow: none; }
.ect-furniture .ectf-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.ect-furniture .ectf-linkbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ectf-ink-2);
  padding: var(--ectf-s1) 0;
  transition: color .2s ease;
}
.ect-furniture .ectf-linkbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; }
.ect-furniture .ectf-linkbtn .wish-btn svg,
.ect-furniture .wish-btn.ectf-linkbtn svg { fill: none; stroke: currentColor; stroke-width: 1.9; }
.ect-furniture .ectf-linkbtn:hover { color: var(--ectf-accent-ink); }
/* The buy box's wishlist control reuses the marketplace's .wish-btn class so the
   existing delegated handler picks it up — which also drags in
   `.wish-btn{position:absolute;top:9px;right:9px;width:38px;…}`, the styling for
   a heart floating over a product tile. Here it is an inline text link, so every
   one of those properties is restated rather than left to chance.

   !important is required here, not lazy: styles.css:5080 pins the heart with
   `position:absolute !important; top:9px !important; width:38px !important; …`
   so it can never drift off a product tile. !important beats specificity, so a
   normal rule — however specific — loses. Each pinned property is unpinned
   individually and only inside this template. */
.ect-furniture .wish-btn.ectf-linkbtn {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  z-index: auto;
  padding: var(--ectf-s1) 0;
  justify-content: flex-start;
}
.ect-furniture .wish-btn.ectf-linkbtn svg { width: 16px; height: 16px; }
.ect-furniture .wish-btn.ectf-linkbtn svg path { fill: none !important; stroke: currentColor !important; stroke-width: 1.9; }
.ect-furniture .wish-btn.ectf-linkbtn.is-wished svg path { fill: var(--ectf-red) !important; stroke: var(--ectf-red) !important; }
.ect-furniture .wish-btn.ectf-linkbtn.is-wished { color: var(--ectf-red); }

/* -------------------------------------------------- demo-only site chrome */

.ect-furniture .ectf-sitebar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ectf-glass);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--ectf-line);
}
.ect-furniture .ectf-sitebar-in {
  display: flex;
  align-items: center;
  gap: var(--ectf-s3);
  height: 72px;
  padding: 0 var(--ectf-s4);
}
.ect-furniture .ectf-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.03em;
  color: var(--ectf-ink);
  text-decoration: none;
}
.ect-furniture .ectf-brand-mark {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--ectf-grad);
  color: var(--ectf-on-accent);
  font-size: 16px;
}
.ect-furniture .ectf-sitesearch {
  flex: 1;
  max-width: 460px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 var(--ectf-s2);
  border-radius: var(--ectf-r-pill);
  background: var(--ectf-bg-soft);
  border: 1px solid var(--ectf-line);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ect-furniture .ectf-sitesearch:focus-within {
  border-color: var(--ectf-accent-ink);
  box-shadow: 0 0 0 4px rgba(var(--ectf-g1-rgb), .10);
}
.ect-furniture .ectf-sitesearch svg { width: 17px; height: 17px; color: var(--ectf-ink-3); flex: none; }
/* styles.css gives every input a 51px height + dark fill; restate explicitly. */
.ect-furniture .ectf-sitesearch input {
  flex: 1;
  height: 42px;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ectf-ink);
  font-size: 14px;
  border-radius: 0;
}
.ect-furniture .ectf-sitesearch input::placeholder { color: var(--ectf-ink-3); }
.ect-furniture .ectf-sitenav { display: flex; gap: var(--ectf-s3); }
.ect-furniture .ectf-sitenav a {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  color: var(--ectf-ink-2);
  text-decoration: none;
  padding: 6px 0;
  transition: color .2s ease;
}
.ect-furniture .ectf-sitenav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--ectf-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .32s var(--ectf-ease);
}
.ect-furniture .ectf-sitenav a:hover { color: var(--ectf-ink); }
.ect-furniture .ectf-sitenav a:hover::after { transform: scaleX(1); }
.ect-furniture .ectf-siteicons { display: flex; align-items: center; gap: var(--ectf-s1); margin-left: auto; }
.ect-furniture .ectf-iconbtn {
  position: relative;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ectf-ink-2);
  transition: background-color .2s ease, color .2s ease;
}
.ect-furniture .ectf-iconbtn svg { width: 19px; height: 19px; }
.ect-furniture .ectf-iconbtn:hover { background: var(--ectf-bg-soft); color: var(--ectf-ink); }
.ect-furniture .ectf-dot {
  position: absolute;
  top: 4px; right: 3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--ectf-r-pill);
  background: var(--ectf-red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.ect-furniture .ectf-avatar {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ectf-grad);
  color: var(--ectf-on-accent);
  font-size: 14px;
  font-weight: 700;
}

/* ----------------------------------------------------------- announcement */

.ect-furniture .ectf-announce {
  background: var(--ectf-grad);
  color: var(--ectf-on-accent);
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  padding: 10px var(--ectf-s3);
}

/* ------------------------------------------------------------------- hero */

.ect-furniture .ectf-hero {
  position: relative;
  margin-top: var(--ectf-s4);
  border-radius: var(--ectf-r-lg);
  overflow: hidden;
  background: var(--ectf-bg-soft);
  box-shadow: var(--ectf-sh-md);
}
.ect-furniture .ectf-hero-media {
  position: relative;
  /* width:100% is load-bearing. With `aspect-ratio` + `min-height` and an AUTO
     width, the box widens to satisfy the ratio once min-height kicks in — at
     320px that computed a 320px-wide banner inside a 288px column, so the
     banner ran off the right edge. Pinning the width makes height follow. */
  width: 100%;
  aspect-ratio: 1440 / 420;
  min-height: 200px;
  background: var(--ectf-grad-soft);
  overflow: hidden;
}
.ect-furniture .ectf-hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* Scrim only — it is what keeps the glass card readable over an arbitrary
   seller photo. No colour wash: the seller's colour lives on the buttons. */
.ect-furniture .ectf-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 13, 18, 0) 30%, rgba(11, 13, 18, .42) 100%);
}
/* No banner uploaded — a calm branded gradient, never a broken-image box. */
.ect-furniture .ectf-hero-media--empty {
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(var(--ectf-g1-rgb), .22) 0%, rgba(var(--ectf-g1-rgb), 0) 55%),
    radial-gradient(110% 130% at 88% 10%, rgba(var(--ectf-g2-rgb), .20) 0%, rgba(var(--ectf-g2-rgb), 0) 55%),
    var(--ectf-bg-soft);
}
.ect-furniture .ectf-hero-media--empty::after { display: none; }

.ect-furniture .ectf-hero-glass {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ectf-s3);
  flex-wrap: wrap;
  margin: -72px var(--ectf-s3) var(--ectf-s3);
  padding: var(--ectf-s3);
  border-radius: var(--ectf-r-lg);
  background: var(--ectf-glass);
  border: 1px solid var(--ectf-glass-line);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  box-shadow: var(--ectf-sh-lg);
}
.ect-furniture .ectf-hero-id { display: flex; align-items: center; gap: var(--ectf-s3); min-width: 0; }
.ect-furniture .ectf-logo {
  flex: none;
  width: 88px;
  height: 88px;
  border-radius: var(--ectf-r-md);
  overflow: hidden;
  background: var(--ectf-surface);
  border: 1px solid var(--ectf-line);
  box-shadow: var(--ectf-sh-sm);
  display: grid;
  place-items: center;
}
.ect-furniture .ectf-logo img { width: 100%; height: 100%; object-fit: cover; }
.ect-furniture .ectf-logo-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--ectf-grad);
  color: var(--ectf-on-accent);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.04em;
}
.ect-furniture .ectf-logo-fallback--lg { border-radius: var(--ectf-r-lg); font-size: 72px; }
.ect-furniture .ectf-hero-txt { min-width: 0; }
.ect-furniture .ectf-store-name {
  display: flex;
  align-items: center;
  gap: var(--ectf-s2);
  flex-wrap: wrap;
  font-size: clamp(24px, 2.6vw, 36px);
}
.ect-furniture .ectf-verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 12px 0 8px;
  border-radius: var(--ectf-r-pill);
  background: var(--ectf-grad);
  color: var(--ectf-on-accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
}
.ect-furniture .ectf-verified svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ect-furniture .ectf-store-line {
  margin-top: 6px;
  font-size: 15px;
  color: var(--ectf-ink-2);
  max-width: 62ch;
}
.ect-furniture .ectf-mchips { display: flex; flex-wrap: wrap; gap: var(--ectf-s2); margin-top: 14px; }
.ect-furniture .ectf-mchip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-size: 13px;
  color: var(--ectf-ink-3);
}
.ect-furniture .ectf-mchip b { font-size: 14px; font-weight: 700; color: var(--ectf-ink); }
.ect-furniture .ectf-mchip + .ectf-mchip::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ectf-line-2);
  margin-right: 11px;
  align-self: center;
}
.ect-furniture .ectf-hero-cta { display: flex; gap: var(--ectf-s1); flex-wrap: wrap; }

/* ------------------------------------------------------------------ trust */

.ect-furniture .ectf-trust { margin-top: var(--ectf-s3); }
.ect-furniture .ectf-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--ectf-line);
  border: 1px solid var(--ectf-line);
  border-radius: var(--ectf-r-md);
  overflow: hidden;
}
.ect-furniture .ectf-trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: var(--ectf-s2) var(--ectf-s3);
  background: var(--ectf-surface);
}
.ect-furniture .ectf-trust-ico {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--ectf-r-sm);
  background: var(--ectf-grad-soft);
  color: var(--ectf-accent-ink);
}
.ect-furniture .ectf-trust-ico svg { width: 20px; height: 20px; }
.ect-furniture .ectf-trust-item b { display: block; font-size: 14px; font-weight: 600; }
.ect-furniture .ectf-trust-item span { display: block; font-size: 12.5px; color: var(--ectf-ink-3); }

/* --------------------------------------------------------------- sections */

.ect-furniture .ectf-section { padding: var(--ectf-s7) 0 0; }
.ect-furniture .ectf-sechead { margin-bottom: var(--ectf-s4); max-width: 68ch; }
.ect-furniture .ectf-sechead p { margin-top: var(--ectf-s1); font-size: 15px; color: var(--ectf-ink-3); }
.ect-furniture .ectf-empty {
  padding: var(--ectf-s6) var(--ectf-s3);
  text-align: center;
  color: var(--ectf-ink-3);
  background: var(--ectf-bg-soft);
  border-radius: var(--ectf-r-lg);
}

/* --------------------------------------------------------------- featured */

.ect-furniture .ectf-featured { padding-top: var(--ectf-s6); }
.ect-furniture .ectf-featured-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--ectf-s6);
  align-items: start;
}
.ect-furniture .ectf-gallery { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--ectf-s2); }
.ect-furniture .ectf-thumbs {
  display: flex;
  flex-direction: column;
  gap: var(--ectf-s1);
  max-height: 560px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.ect-furniture .ectf-thumb {
  flex: none;
  width: 88px;
  height: 88px;
  border-radius: var(--ectf-r-sm);
  overflow: hidden;
  background: var(--ectf-bg-soft);
  border: 1.5px solid var(--ectf-line);
  display: grid;
  place-items: center;
  transition: border-color .24s var(--ectf-ease), transform .24s var(--ectf-ease);
}
.ect-furniture .ectf-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ect-furniture .ectf-thumb:hover { transform: translateY(-2px); border-color: var(--ectf-line-2); }
.ect-furniture .ectf-thumb.is-on { border-color: var(--ectf-accent-ink); box-shadow: 0 0 0 3px rgba(var(--ectf-g1-rgb), .12); }

.ect-furniture .ectf-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--ectf-r-lg);
  overflow: hidden;
  background: var(--ectf-bg-soft);
  border: 1px solid var(--ectf-line);
  display: grid;
  place-items: center;
}
.ect-furniture .ectf-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s var(--ectf-ease);
}
.ect-furniture .ectf-stage:hover img { transform: scale(1.55); }
.ect-furniture .ectf-stage-empty { font-size: 96px; opacity: .35; }
.ect-furniture .ectf-badge {
  position: absolute;
  top: var(--ectf-s2);
  left: var(--ectf-s2);
  z-index: 2;
  height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: var(--ectf-r-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
}
.ect-furniture .ectf-badge--sale { background: var(--ectf-grad); box-shadow: var(--ectf-sh-brand); }
.ect-furniture .ectf-badge--out { background: var(--ectf-ink); left: auto; right: var(--ectf-s2); }

/* ----------------------------------------------------------- product info */

.ect-furniture .ectf-pinfo { padding-top: var(--ectf-s1); }
.ect-furniture .ectf-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ectf-accent-ink);
  margin-bottom: 10px;
}
.ect-furniture .ectf-pinfo h2 { font-size: clamp(24px, 2.2vw, 32px); }
.ect-furniture .ectf-prate {
  display: flex;
  align-items: center;
  gap: var(--ectf-s1);
  flex-wrap: wrap;
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--ectf-ink-3);
}
.ect-furniture .ectf-prate b { color: var(--ectf-ink); font-size: 14px; }
.ect-furniture .ectf-stars { display: inline-flex; gap: 1px; }
.ect-furniture .ectf-star { color: var(--ectf-line-3); font-size: 15px; line-height: 1; }
.ect-furniture .ectf-star.is-on,
.ect-furniture .ectf-star.is-half { color: #F5A623; }
.ect-furniture .ectf-sold {
  padding: 3px 10px;
  border-radius: var(--ectf-r-pill);
  background: rgba(14, 159, 110, .10);
  color: var(--ectf-green);
  font-size: 12px;
  font-weight: 600;
}

.ect-furniture .ectf-price {
  display: flex;
  align-items: baseline;
  gap: var(--ectf-s2);
  flex-wrap: wrap;
  margin-top: var(--ectf-s3);
}
.ect-furniture .ectf-price-now { font-size: 38px; font-weight: 800; letter-spacing: -0.035em; }
.ect-furniture .ectf-price-was { font-size: 18px; color: var(--ectf-ink-3); }
.ect-furniture .ectf-price-off {
  padding: 4px 12px;
  border-radius: var(--ectf-r-pill);
  background: rgba(224, 36, 94, .10);
  color: var(--ectf-red);
  font-size: 13px;
  font-weight: 700;
}
.ect-furniture .ectf-tax { font-size: 12.5px; color: var(--ectf-ink-3); margin-top: 4px; }
.ect-furniture .ectf-member {
  margin-top: var(--ectf-s2);
  font-size: 14px;
  font-weight: 600;
  color: var(--ectf-gold);
}
.ect-furniture .ectf-emi { margin-top: 6px; font-size: 13px; color: var(--ectf-ink-3); }
.ect-furniture .ectf-emi b { color: var(--ectf-ink-2); }

.ect-furniture .ectf-stock {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: var(--ectf-s3);
  font-size: 14px;
  font-weight: 600;
  color: var(--ectf-green);
}
.ect-furniture .ectf-stock::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.ect-furniture .ectf-stock.is-low { color: #D97706; }
.ect-furniture .ectf-stock.is-out { color: var(--ectf-red); }
.ect-furniture .ectf-eta { font-weight: 500; color: var(--ectf-ink-3); }

.ect-furniture .ectf-opt { margin-top: var(--ectf-s3); }
.ect-furniture .ectf-opt-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ectf-ink-3);
  margin-bottom: 10px;
}
.ect-furniture .ectf-swatches,
.ect-furniture .ectf-sizes { display: flex; gap: var(--ectf-s1); flex-wrap: wrap; }
.ect-furniture .ectf-swatch {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  padding: 3px;
  border: 2px solid transparent;
  transition: border-color .24s var(--ectf-ease), transform .24s var(--ectf-ease);
}
.ect-furniture .ectf-swatch span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--sw, var(--ectf-bg-soft));
  box-shadow: inset 0 0 0 1px rgba(11, 13, 18, .10);
}
.ect-furniture .ectf-swatch[data-plain] {
  width: auto;
  height: 40px;
  padding: 0 var(--ectf-s2);
  border-radius: var(--ectf-r-pill);
  border: 1.5px solid var(--ectf-line);
  font-size: 13px;
  font-weight: 500;
}
.ect-furniture .ectf-swatch[data-plain] span { background: none; box-shadow: none; width: auto; height: auto; }
.ect-furniture .ectf-swatch:hover { transform: translateY(-2px); }
.ect-furniture .ectf-swatch.is-on { border-color: var(--ectf-accent-ink); }

.ect-furniture .ectf-size {
  min-width: 52px;
  height: 44px;
  padding: 0 var(--ectf-s2);
  border-radius: var(--ectf-r-sm);
  border: 1.5px solid var(--ectf-line);
  background: var(--ectf-surface);
  font-size: 14px;
  font-weight: 600;
  transition: all .24s var(--ectf-ease);
}
.ect-furniture .ectf-size:hover { border-color: var(--ectf-line-2); transform: translateY(-2px); }
.ect-furniture .ectf-size.is-on { border-color: var(--ectf-accent-ink); background: rgba(var(--ectf-g1-rgb), .06); color: var(--ectf-accent-ink); }

.ect-furniture .ectf-qty {
  display: inline-flex;
  align-items: center;
  height: 48px;
  border-radius: var(--ectf-r-pill);
  border: 1.5px solid var(--ectf-line);
  overflow: hidden;
}
.ect-furniture .ectf-qty button {
  width: 46px;
  height: 100%;
  font-size: 19px;
  color: var(--ectf-ink-2);
  transition: background-color .2s ease;
}
.ect-furniture .ectf-qty button:hover { background: var(--ectf-bg-soft); }
.ect-furniture .ectf-qty output {
  min-width: 44px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
}

/* -- the buy box IS a marketplace .product-card; neutralise the site's
      dark card styling without touching the DOM the cart reads. ---------- */
.ect-furniture .ectf-buybox {
  display: block;
  margin-top: var(--ectf-s4);
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: inherit;
  transform: none;
}
.ect-furniture .ectf-buybox:hover { transform: none; box-shadow: none; }
.ect-furniture .ectf-actions { display: flex; gap: var(--ectf-s1); flex-wrap: wrap; }
.ect-furniture .ectf-actions .ectf-btn { flex: 1 1 200px; height: 56px; font-size: 16px; }
.ect-furniture .ectf-actions-sub {
  display: flex;
  gap: var(--ectf-s3);
  flex-wrap: wrap;
  margin-top: var(--ectf-s2);
}
.ect-furniture .ectf-assure {
  display: flex;
  gap: var(--ectf-s3);
  flex-wrap: wrap;
  list-style: none;
  margin-top: var(--ectf-s3);
  padding-top: var(--ectf-s3);
  border-top: 1px solid var(--ectf-line);
}
.ect-furniture .ectf-assure li {
  position: relative;
  padding-left: 22px;
  font-size: 13px;
  color: var(--ectf-ink-2);
}
.ect-furniture .ectf-assure li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: -1px;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ectf-grad-soft);
  color: var(--ectf-accent-ink);
  font-size: 10px;
  font-weight: 800;
}

/* --------------------------------------------------------- details / tabs */

.ect-furniture .ectf-tabs {
  display: flex;
  gap: var(--ectf-s3);
  border-bottom: 1px solid var(--ectf-line);
  overflow-x: auto;
  scrollbar-width: none;
}
.ect-furniture .ectf-tabs::-webkit-scrollbar { display: none; }
.ect-furniture .ectf-tab {
  position: relative;
  flex: none;
  padding: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ectf-ink-3);
  white-space: nowrap;
  transition: color .24s ease;
}
.ect-furniture .ectf-tab::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--ectf-grad);
  transform: scaleX(0);
  transition: transform .34s var(--ectf-ease);
}
.ect-furniture .ectf-tab:hover { color: var(--ectf-ink-2); }
.ect-furniture .ectf-tab.is-on { color: var(--ectf-ink); }
.ect-furniture .ectf-tab.is-on::after { transform: scaleX(1); }
.ect-furniture .ectf-tabpane { display: none; padding-top: var(--ectf-s3); max-width: 80ch; }
.ect-furniture .ectf-tabpane.is-on { display: block; animation: ectf-fade .38s var(--ectf-ease); }
@keyframes ectf-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ect-furniture .ectf-tabpane ul { list-style: none; display: grid; gap: 10px; }
.ect-furniture .ectf-tabpane li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  color: var(--ectf-ink-2);
}
.ect-furniture .ectf-tabpane li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ectf-grad);
}
.ect-furniture .ectf-spectable { width: 100%; border-collapse: collapse; }
.ect-furniture .ectf-spectable th,
.ect-furniture .ectf-spectable td {
  padding: 14px var(--ectf-s2);
  text-align: left;
  font-size: 14.5px;
  border-bottom: 1px solid var(--ectf-line-soft);
}
.ect-furniture .ectf-spectable th { width: 240px; font-weight: 600; color: var(--ectf-ink-3); }
/* Seller-typed values (a URL, an unspaced model number) must wrap rather than
   stretch the table and with it the page. */
.ect-furniture .ectf-spectable th,
.ect-furniture .ectf-spectable td { overflow-wrap: anywhere; }
.ect-furniture .ectf-spectable td { color: var(--ectf-ink); }

/* ------------------------------------------------------ toolbar + product grid */

.ect-furniture .ectf-toolbar-slot { margin-bottom: var(--ectf-s3); }
/* Written as .ec-grid.ec-store-grid (0,3,0) on purpose: styles.css carries
   `html.is-app .ec-grid{grid-template-columns:repeat(5,1fr)}` at >=1025px,
   which is (0,2,1) and would outrank a bare .ec-store-grid inside the app. */
.ect-furniture .ec-grid.ec-store-grid {
  display: grid;
  /* auto-fill + a minimum, NOT a fixed column count. The storefront renders
     inside the SPA's detail band (~1116px), not the full 1440 canvas, so a
     hard `repeat(4,1fr)` produced ~198px cards and clipped the View button to
     "Vie". Sizing from the CONTAINER means the card keeps its designed width
     wherever this template is mounted.

     !important is required: styles.css:4519 sets
     `html.is-app .ec-grid{grid-template-columns:repeat(5,1fr) !important}`
     for the app's wide layout, and `is-app` is on every surface. */
  grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)) !important;
  gap: var(--ectf-s3);
}
/* The load-more control is re-rendered by app.store.js with these exact
   classes, so it is styled by them rather than by a template class. */
.ect-furniture .ec-store-more-wrap { display: flex; justify-content: center; margin-top: var(--ectf-s4); }
.ect-furniture .ec-loadmore-btn {
  height: 48px;
  padding: 0 var(--ectf-s4);
  border-radius: var(--ectf-r-pill);
  border: 1px solid var(--ectf-line);
  background: rgba(255, 255, 255, .72);
  color: var(--ectf-ink);
  font-size: 15px;
  font-weight: 600;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .28s var(--ectf-ease), box-shadow .28s var(--ectf-ease), border-color .2s ease;
}
.ect-furniture .ec-loadmore-btn:hover { transform: translateY(-2px); border-color: var(--ectf-line-2); box-shadow: var(--ectf-sh-sm); }
.ect-furniture .ectf-similar { margin-top: var(--ectf-s5); }

/* -- the uniform 7G search / sort / filter toolbar -----------------------
   This markup comes from app.store.js and is IDENTICAL in every template on
   purpose, so a buyer never relearns how to search a shop. Its default styling
   in styles.css is built for the dark marketplace, so it must be re-skinned
   for a white page here — re-skinned, never removed. */

.ect-furniture .ec-sf-tools { display: grid; gap: var(--ectf-s2); }
.ect-furniture .ec-sf-searchwrap { position: relative; max-width: 560px; }
.ect-furniture .ec-sf-search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 var(--ectf-s2);
  border-radius: var(--ectf-r-pill);
  background: var(--ectf-surface);
  border: 1px solid var(--ectf-line);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ect-furniture .ec-sf-search:focus-within {
  border-color: var(--ectf-accent-ink);
  box-shadow: 0 0 0 4px rgba(var(--ectf-g1-rgb), .10);
}
.ect-furniture .ec-sf-search svg { color: var(--ectf-ink-3); flex: none; }
.ect-furniture .ec-sf-search input {
  flex: 1;
  height: 46px;
  min-width: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: var(--ectf-ink);
  font-size: 14.5px;
  border-radius: 0;
  box-shadow: none;
}
.ect-furniture .ec-sf-search input::placeholder { color: var(--ectf-ink-3); }
.ect-furniture .ec-sf-search input::-webkit-search-cancel-button { display: none; }
.ect-furniture .ec-sf-clear {
  display: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--ectf-ink-3);
  font-size: 17px;
  line-height: 1;
}
.ect-furniture .ec-sf-clear.show { display: grid; place-items: center; }
.ect-furniture .ec-sf-clear:hover { background: var(--ectf-bg-soft); color: var(--ectf-ink); }

.ect-furniture .ec-sf-row { display: flex; align-items: center; gap: var(--ectf-s1); flex-wrap: wrap; }
.ect-furniture .ec-sf-select {
  height: 42px;
  padding: 0 var(--ectf-s2);
  border-radius: var(--ectf-r-pill);
  border: 1px solid var(--ectf-line);
  background: var(--ectf-surface);
  color: var(--ectf-ink-2);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.ect-furniture .ec-sf-btn {
  height: 42px;
  padding: 0 var(--ectf-s3);
  border-radius: var(--ectf-r-pill);
  border: 1px solid var(--ectf-line);
  background: var(--ectf-surface);
  color: var(--ectf-ink-2);
  font-size: 14px;
  font-weight: 600;
  transition: all .2s ease;
}
.ect-furniture .ec-sf-btn:hover { border-color: var(--ectf-accent-ink); color: var(--ectf-accent-ink); }
.ect-furniture .ec-sf-count { font-size: 13px; color: var(--ectf-ink-3); margin-left: auto; }

.ect-furniture .ec-sf-panel { display: none; }
.ect-furniture .ec-sf-panel.show {
  display: grid;
  gap: var(--ectf-s3);
  padding: var(--ectf-s3);
  border-radius: var(--ectf-r-md);
  background: var(--ectf-bg-soft);
  border: 1px solid var(--ectf-line);
}
.ect-furniture .ec-sf-flabel {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ectf-ink-3);
  margin-bottom: 10px;
}
.ect-furniture .ec-sf-chiprow { display: flex; gap: var(--ectf-s1); flex-wrap: wrap; }
.ect-furniture .ec-sf-chip {
  height: 36px;
  padding: 0 14px;
  border-radius: var(--ectf-r-pill);
  border: 1px solid var(--ectf-line);
  background: var(--ectf-surface);
  color: var(--ectf-ink-2);
  font-size: 13px;
  font-weight: 500;
  transition: all .2s ease;
}
.ect-furniture .ec-sf-chip:hover { border-color: var(--ectf-line-2); }
.ect-furniture .ec-sf-chip.is-on { background: var(--ectf-grad); border-color: transparent; color: var(--ectf-on-accent); }
.ect-furniture .ec-sf-price { display: flex; align-items: center; gap: var(--ectf-s1); }
.ect-furniture .ec-sf-price input {
  width: 110px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--ectf-r-sm);
  border: 1px solid var(--ectf-line);
  background: var(--ectf-surface);
  color: var(--ectf-ink);
  font-size: 14px;
}
.ect-furniture .ec-sf-panel-foot { display: flex; gap: var(--ectf-s1); }
.ect-furniture .ec-sf-apply {
  height: 42px;
  padding: 0 var(--ectf-s3);
  border-radius: var(--ectf-r-pill);
  background: var(--ectf-grad);
  color: var(--ectf-on-accent);
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--ectf-sh-brand);
}
.ect-furniture .ec-sf-reset {
  height: 42px;
  padding: 0 var(--ectf-s3);
  border-radius: var(--ectf-r-pill);
  border: 1px solid var(--ectf-line);
  background: var(--ectf-surface);
  color: var(--ectf-ink-2);
  font-size: 14px;
  font-weight: 600;
}
.ect-furniture .ec-sf-sugg {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 380px;
  overflow-y: auto;
  padding: var(--ectf-s2);
  border-radius: var(--ectf-r-md);
  background: var(--ectf-surface);
  border: 1px solid var(--ectf-line);
  box-shadow: var(--ectf-sh-lg);
}
.ect-furniture .ec-sf-sugg.show { display: block; }
.ect-furniture .ec-sf-sugg-h {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ectf-ink-3);
  margin: var(--ectf-s1) 0;
}
.ect-furniture .ec-sf-hit {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px;
  border-radius: var(--ectf-r-sm);
  text-align: left;
  transition: background-color .18s ease;
}
.ect-furniture .ec-sf-hit:hover { background: var(--ectf-bg-soft); }
.ect-furniture .ec-sf-hit img {
  width: 40px;
  height: 40px;
  flex: none;
  object-fit: cover;
  border-radius: 8px;
  background: var(--ectf-bg-soft);
}
.ect-furniture .ec-sf-hit-name { flex: 1; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ect-furniture .ec-sf-hit-price { font-size: 14px; font-weight: 700; }
.ect-furniture .ec-sf-empty {
  display: grid;
  gap: 6px;
  padding: var(--ectf-s6) var(--ectf-s3);
  text-align: center;
  color: var(--ectf-ink-3);
  background: var(--ectf-bg-soft);
  border-radius: var(--ectf-r-lg);
}
.ect-furniture .ec-sf-empty b { color: var(--ectf-ink); font-size: 16px; }
.ect-furniture .api-product-status { padding: var(--ectf-s4); text-align: center; color: var(--ectf-ink-3); }
.ect-furniture .api-product-status.error { color: var(--ectf-red); }

/* -- the marketplace product card, restyled (never restructured) ---------
   Every rule below is :not(.ectf-buybox). The featured buy box is ALSO a
   .product-card — it has to be, because that is how app.core.js finds the
   name, image, price and variant ids when the buyer taps Add To Cart — but it
   is a full-width column, not a tile. Without the exclusion the tile rules win
   on source order and the buy box gets a floating heart, a cramped grid
   button and the wrong colour on Buy Now. */
.ect-furniture .product-card:not(.ectf-buybox) {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--ectf-s2);
  border-radius: var(--ectf-r-lg);
  background: var(--ectf-surface);
  border: 1px solid var(--ectf-line);
  box-shadow: var(--ectf-sh-sm);
  color: var(--ectf-ink);
  cursor: pointer;
  overflow: hidden;
  transition: transform .34s var(--ectf-ease), box-shadow .34s var(--ectf-ease), border-color .24s ease;
}
.ect-furniture .product-card:not(.ectf-buybox):hover {
  transform: translateY(-6px);
  box-shadow: var(--ectf-sh-lg);
  border-color: var(--ectf-line-2);
}
.ect-furniture .product-card:not(.ectf-buybox) .product-image {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--ectf-r-md);
  overflow: hidden;
  background: var(--ectf-bg-soft);
  display: grid;
  place-items: center;
  font-size: 44px;
  margin-bottom: 6px;
}
.ect-furniture .product-card:not(.ectf-buybox) .product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s var(--ectf-ease);
}
.ect-furniture .product-card:not(.ectf-buybox):hover .product-image img { transform: scale(1.07); }
.ect-furniture .product-card:not(.ectf-buybox) h3 {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ect-furniture .product-card:not(.ectf-buybox) .rating {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 2px 9px;
  border-radius: var(--ectf-r-pill);
  background: rgba(14, 159, 110, .10);
  color: var(--ectf-green);
  font-size: 12px;
  font-weight: 700;
}
.ect-furniture .product-card:not(.ectf-buybox) .product-price {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.ect-furniture .product-card:not(.ectf-buybox) .product-price del {
  margin-left: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ectf-ink-3);
}
/* Rating, member price and the offer chip are EarnCart's, not the template's —
   they are styled here so they can never be dropped to "clean up" a layout. */
.ect-furniture .product-card:not(.ectf-buybox) .product-member-price {
  font-size: 12px;
  font-weight: 600;
  color: var(--ectf-gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ect-furniture .product-card:not(.ectf-buybox) .product-offer {
  align-self: flex-start;
  padding: 2px 9px;
  border-radius: var(--ectf-r-pill);
  background: rgba(224, 36, 94, .10);
  color: var(--ectf-red);
  font-size: 11.5px;
  font-weight: 700;
}
.ect-furniture .product-card:not(.ectf-buybox) .ec-bought { font-size: 12px; color: var(--ectf-ink-3); }
.ect-furniture .product-card:not(.ectf-buybox) .product-actions {
  display: flex;
  gap: 6px;
  margin-top: auto;
  padding-top: var(--ectf-s1);
}
.ect-furniture .product-card:not(.ectf-buybox) .cart-btn {
  flex: 1;
  height: 40px;
  padding: 0 10px;
  border-radius: var(--ectf-r-pill);
  border: 0;
  background: var(--ectf-grad);
  color: var(--ectf-on-accent);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: transform .24s var(--ectf-ease), box-shadow .24s var(--ectf-ease), background-color .2s ease;
}
.ect-furniture .product-card:not(.ectf-buybox) .cart-btn:hover { transform: translateY(-1px); box-shadow: var(--ectf-sh-brand); }
.ect-furniture .product-card:not(.ectf-buybox) .cart-btn.secondary {
  /* shrinkable, not fixed — a narrow tile must clip whitespace, not the word */
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--ectf-surface);
  color: var(--ectf-ink-2);
  border: 1px solid var(--ectf-line);
  box-shadow: none;
}
.ect-furniture .product-card:not(.ectf-buybox) .cart-btn.secondary:hover { background: var(--ectf-bg-soft); box-shadow: none; }
.ect-furniture .product-card:not(.ectf-buybox) .cart-btn.out-of-stock,
.ect-furniture .product-card:not(.ectf-buybox) .cart-btn:disabled {
  background: var(--ectf-line-soft);
  color: var(--ectf-ink-3);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
.ect-furniture .product-card:not(.ectf-buybox) .wish-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(11, 13, 18, .06);
  box-shadow: var(--ectf-sh-sm);
  transition: transform .24s var(--ectf-ease), background-color .2s ease;
}
.ect-furniture .product-card:not(.ectf-buybox) .wish-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--ectf-ink-2);
  stroke-width: 1.9;
}
.ect-furniture .product-card:not(.ectf-buybox) .wish-btn:hover { transform: scale(1.08); }
.ect-furniture .product-card:not(.ectf-buybox) .wish-btn.is-wished svg { fill: var(--ectf-red); stroke: var(--ectf-red); }
.ect-furniture .product-card:not(.ectf-buybox) .soldout-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  padding: 4px 10px;
  border-radius: var(--ectf-r-pill);
  background: var(--ectf-ink);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.ect-furniture .product-card:not(.ectf-buybox).is-soldout .product-image img { opacity: .55; filter: grayscale(.35); }

/* ---------------------------------------------------------------- reviews */

.ect-furniture .ectf-rv-grid {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: var(--ectf-s6);
  align-items: start;
}
.ect-furniture .ectf-rv-summary {
  position: sticky;
  top: 96px;
  padding: var(--ectf-s3);
  border-radius: var(--ectf-r-lg);
  background: var(--ectf-bg-soft);
  border: 1px solid var(--ectf-line);
}
.ect-furniture .ectf-rv-big { font-size: 56px; font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.ect-furniture .ectf-rv-summary .ectf-stars { margin-top: var(--ectf-s1); }
.ect-furniture .ectf-rv-summary p { font-size: 13px; color: var(--ectf-ink-3); margin-top: 6px; }
.ect-furniture .ectf-bars { display: grid; gap: 8px; margin-top: var(--ectf-s3); }
.ect-furniture .ectf-bar { display: grid; grid-template-columns: 34px minmax(0, 1fr) 42px; align-items: center; gap: 10px; }
.ect-furniture .ectf-bar span { font-size: 12px; color: var(--ectf-ink-3); }
.ect-furniture .ectf-bar b { font-size: 12px; font-weight: 600; color: var(--ectf-ink-3); text-align: right; }
.ect-furniture .ectf-bar-track { height: 7px; border-radius: var(--ectf-r-pill); background: var(--ectf-line-3); overflow: hidden; }
.ect-furniture .ectf-bar-track i { display: block; height: 100%; border-radius: inherit; background: var(--ectf-grad); }

.ect-furniture .ectf-rv-list { display: grid; gap: var(--ectf-s2); }
.ect-furniture .ectf-rv-none { padding: var(--ectf-s4); border: 1px dashed var(--ectf-line); border-radius: var(--ectf-r-lg); text-align: center; }
.ect-furniture .ectf-review {
  padding: var(--ectf-s3);
  border-radius: var(--ectf-r-lg);
  background: var(--ectf-surface);
  border: 1px solid var(--ectf-line);
  box-shadow: var(--ectf-sh-sm);
  transition: box-shadow .3s var(--ectf-ease), transform .3s var(--ectf-ease);
}
.ect-furniture .ectf-review:hover { transform: translateY(-2px); box-shadow: var(--ectf-sh-md); }
.ect-furniture .ectf-review header { display: flex; align-items: center; gap: 12px; }
.ect-furniture .ectf-rv-av {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ectf-grad-soft);
  color: var(--ectf-accent-ink);
  font-weight: 700;
}
.ect-furniture .ectf-review header b { display: block; font-size: 14px; }
.ect-furniture .ectf-rv-vf { font-size: 12px; color: var(--ectf-green); font-weight: 600; }
.ect-furniture .ectf-rv-rate {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: var(--ectf-r-pill);
  background: rgba(14, 159, 110, .10);
  color: var(--ectf-green);
  font-size: 12.5px;
  font-weight: 700;
}
.ect-furniture .ectf-review h4 { margin-top: var(--ectf-s2); font-size: 15px; }
.ect-furniture .ectf-review p { margin-top: 6px; font-size: 14.5px; }
.ect-furniture .ectf-rv-photos { display: flex; gap: var(--ectf-s1); margin-top: var(--ectf-s2); }
.ect-furniture .ectf-rv-photos img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--ectf-r-sm);
  border: 1px solid var(--ectf-line);
}
.ect-furniture .ectf-review footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ectf-s2);
  margin-top: var(--ectf-s2);
  padding-top: var(--ectf-s2);
  border-top: 1px solid var(--ectf-line-soft);
  font-size: 12.5px;
  color: var(--ectf-ink-3);
}
.ect-furniture .ectf-helpful {
  padding: 6px 14px;
  border-radius: var(--ectf-r-pill);
  border: 1px solid var(--ectf-line);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ectf-ink-2);
  transition: all .2s ease;
}
.ect-furniture .ectf-helpful:hover { border-color: var(--ectf-accent-ink); color: var(--ectf-accent-ink); }
.ect-furniture .ectf-helpful.is-on { background: var(--ectf-grad-soft); border-color: transparent; color: var(--ectf-accent-ink); }

/* ------------------------------------------------------------------ about */

.ect-furniture .ectf-about-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--ectf-s6);
  align-items: center;
  padding: var(--ectf-s5);
  border-radius: var(--ectf-r-lg);
  background: var(--ectf-bg-soft);
  border: 1px solid var(--ectf-line);
}
.ect-furniture .ectf-about-txt p { margin-top: var(--ectf-s2); font-size: 15.5px; max-width: 62ch; }
.ect-furniture .ectf-about-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ectf-s5);
  margin-top: var(--ectf-s4);
}
.ect-furniture .ectf-about-stats b {
  display: block;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.ect-furniture .ectf-about-stats span { font-size: 12.5px; color: var(--ectf-ink-3); }
.ect-furniture .ectf-about-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--ectf-r-lg);
  overflow: hidden;
  background: var(--ectf-surface);
  border: 1px solid var(--ectf-line);
  box-shadow: var(--ectf-sh-md);
  display: grid;
  place-items: center;
}
/* Absolutely positioned because a percentage height does not resolve against a
   parent sized by aspect-ratio — the image fell back to its intrinsic height
   (306px in a 229px box) and was cropped from the top-left instead of centred. */
.ect-furniture .ectf-about-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ect-furniture .ectf-about-media .ectf-logo-fallback { position: absolute; inset: 0; }

/* --------------------------------------------------------------- policies */

.ect-furniture .ectf-acc { display: grid; gap: var(--ectf-s1); max-width: 900px; }
.ect-furniture .ectf-acc-item {
  border-radius: var(--ectf-r-md);
  border: 1px solid var(--ectf-line);
  background: var(--ectf-surface);
  overflow: hidden;
  transition: border-color .24s ease, box-shadow .24s ease;
}
.ect-furniture .ectf-acc-item.is-open { border-color: #D8DCE9; box-shadow: var(--ectf-sh-sm); }
.ect-furniture .ectf-acc-head {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: var(--ectf-s2) var(--ectf-s3);
  text-align: left;
  font-size: 15px;
  font-weight: 600;
}
.ect-furniture .ectf-acc-ico {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--ectf-r-sm);
  background: var(--ectf-grad-soft);
  color: var(--ectf-accent-ink);
}
.ect-furniture .ectf-acc-ico svg { width: 18px; height: 18px; }
.ect-furniture .ectf-acc-chev {
  width: 18px;
  height: 18px;
  margin-left: auto;
  color: var(--ectf-ink-3);
  transition: transform .34s var(--ectf-ease);
}
.ect-furniture .ectf-acc-item.is-open .ectf-acc-chev { transform: rotate(180deg); }
.ect-furniture .ectf-acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .38s var(--ectf-ease);
}
.ect-furniture .ectf-acc-item.is-open .ectf-acc-body { grid-template-rows: 1fr; }
.ect-furniture .ectf-acc-body > p {
  overflow: hidden;
  padding: 0 var(--ectf-s3) 0 84px;
  font-size: 14.5px;
}
.ect-furniture .ectf-acc-item.is-open .ectf-acc-body > p { padding-bottom: var(--ectf-s3); }

/* ----------------------------------------------------------------- footer */

/* `display` is stated with !important on both footers on purpose. styles.css
   carries `.is-app footer{display:none!important}` and `is-app` is present on
   every surface, so without an equally-weighted, higher-specificity rule the
   whole footer — including the locked EarnCart bar — disappears. */
.ect-furniture .ectf-footer {
  display: block !important;
  margin-top: var(--ectf-s7);
  background: var(--ectf-bg-soft);
  border-top: 1px solid var(--ectf-line);
}
.ect-furniture .ectf-foot-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--ectf-s6);
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--ectf-s6) var(--ectf-s4);
}
.ect-furniture .ectf-news h3 { font-size: 22px; }
.ect-furniture .ectf-news p { margin-top: 6px; font-size: 14.5px; max-width: 46ch; }
.ect-furniture .ectf-news-form { display: flex; gap: var(--ectf-s1); margin-top: var(--ectf-s3); max-width: 460px; flex-wrap: wrap; }
.ect-furniture .ectf-news-form input {
  flex: 1 1 220px;
  height: 48px;
  min-width: 0;
  padding: 0 var(--ectf-s2);
  border-radius: var(--ectf-r-pill);
  border: 1px solid var(--ectf-line);
  background: var(--ectf-surface);
  color: var(--ectf-ink);
  font-size: 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ect-furniture .ectf-news-form input:focus {
  outline: none;
  border-color: var(--ectf-accent-ink);
  box-shadow: 0 0 0 4px rgba(var(--ectf-g1-rgb), .10);
}
.ect-furniture .ectf-news-done { font-size: 14.5px; font-weight: 600; color: var(--ectf-green); }
.ect-furniture .ectf-foot-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ectf-s3);
}
.ect-furniture .ectf-foot-cols h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ectf-ink-3);
  margin-bottom: var(--ectf-s2);
}
.ect-furniture .ectf-foot-cols button {
  display: block;
  padding: 5px 0;
  font-size: 14px;
  color: var(--ectf-ink-2);
  text-align: left;
  transition: color .2s ease;
}
.ect-furniture .ectf-foot-cols button:hover { color: var(--ectf-accent-ink); }

/* The LOCKED EarnCart bar. Present on every template, on every plan. */
.ect-furniture .ec-store-foot {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: var(--ectf-s2);
  flex-wrap: wrap;
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--ectf-s3) var(--ectf-s4);
  border-top: 1px solid var(--ectf-line);
  font-size: 13px;
  color: var(--ectf-ink-3);
  background: none;
}
.ect-furniture .ec-foot-brand { font-weight: 500; }
.ect-furniture .ec-foot-links { display: flex; gap: var(--ectf-s3); flex-wrap: wrap; }
.ect-furniture .ec-foot-link {
  font-size: 13px;
  color: var(--ectf-ink-3);
  transition: color .2s ease;
  background: none;
  border: 0;
  padding: 0;
}
.ect-furniture .ec-foot-link:hover { color: var(--ectf-accent-ink); }
.ect-furniture .ec-foot-brandlink { font-weight: 700; color: var(--ectf-ink); }

/* ================================================================ RESPONSIVE
   Mobile-first behaviour is expressed as a set of narrowing steps from the
   1440 canvas. Nothing below is optional — a storefront is browsed on a phone
   far more often than on a desktop. ======================================= */

@media (max-width: 1200px) {
  .ect-furniture .ectf-featured-grid { gap: var(--ectf-s4); }
  .ect-furniture .ec-grid.ec-store-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; }
  .ect-furniture .ectf-rv-grid { grid-template-columns: 280px minmax(0, 1fr); gap: var(--ectf-s4); }
  .ect-furniture .ectf-about-card { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--ectf-s4); padding: var(--ectf-s4); }
}

@media (max-width: 1024px) {
  .ect-furniture .ectf-shell { padding: 0 var(--ectf-s3); }
  .ect-furniture .ectf-sitenav { display: none; }
  .ect-furniture .ectf-featured-grid { grid-template-columns: minmax(0, 1fr); gap: var(--ectf-s4); }
  .ect-furniture .ectf-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ect-furniture .ectf-rv-grid { grid-template-columns: minmax(0, 1fr); }
  .ect-furniture .ectf-rv-summary { position: static; }
  .ect-furniture .ectf-about-card { grid-template-columns: minmax(0, 1fr); }
  .ect-furniture .ectf-about-media { max-width: 420px; }
  .ect-furniture .ectf-foot-top { grid-template-columns: minmax(0, 1fr); gap: var(--ectf-s4); padding: var(--ectf-s5) var(--ectf-s3); }
  .ect-furniture .ectf-section { padding-top: var(--ectf-s6); }
}

@media (max-width: 768px) {
  .ect-furniture { font-size: 15px; }
  .ect-furniture .ectf-shell { padding: 0 var(--ectf-s2); }
  .ect-furniture .ectf-hero { margin-top: var(--ectf-s2); border-radius: var(--ectf-r-md); }
  .ect-furniture .ectf-hero-media { aspect-ratio: 16 / 9; min-height: 0; }
  /* The glass card stops overlapping the banner — at this width the overlap
     eats the banner instead of layering on it. */
  .ect-furniture .ectf-hero-glass {
    margin: var(--ectf-s2);
    padding: var(--ectf-s2);
    flex-direction: column;
    align-items: stretch;
    border-radius: var(--ectf-r-md);
  }
  /* align-items:center centres the logo against the WHOLE text block — name,
     tagline and meta chips. On a wide card that is invisible; on a narrow one
     the block is tall and the logo sinks to the middle of it, leaving the store
     name floating above the logo with nothing beside it. Top-align so the logo
     and the name read as one line, the way they do on desktop. */
  .ect-furniture .ectf-hero-id { gap: var(--ectf-s2); align-items: flex-start; }
  .ect-furniture .ectf-logo { width: 64px; height: 64px; }
  .ect-furniture .ectf-hero-cta { width: 100%; }
  .ect-furniture .ectf-hero-cta .ectf-btn { flex: 1 1 140px; height: 44px; font-size: 14px; }
  .ect-furniture .ectf-gallery { grid-template-columns: minmax(0, 1fr); }
  /* Thumbnails become a horizontal rail under the image on touch. */
  .ect-furniture .ectf-thumbs { flex-direction: row; order: 2; max-height: none; overflow-x: auto; padding-bottom: 4px; }
  .ect-furniture .ectf-thumb { width: 68px; height: 68px; }
  .ect-furniture .ectf-stage { order: 1; }
  /* Hover-zoom is meaningless on touch and only causes a jumpy image. */
  .ect-furniture .ectf-stage:hover img { transform: none; }
  .ect-furniture .ectf-price-now { font-size: 30px; }
  .ect-furniture .ectf-actions .ectf-btn { height: 50px; flex-basis: 100%; }
  .ect-furniture .ec-grid.ec-store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--ectf-s2); }
  .ect-furniture .product-card:not(.ectf-buybox) .product-actions { min-width: 0; }
  .ect-furniture .ectf-about-card { padding: var(--ectf-s3); }
  .ect-furniture .ectf-about-stats { gap: var(--ectf-s3); }
  .ect-furniture .ectf-about-stats b { font-size: 22px; }
  .ect-furniture .ectf-acc-body > p { padding-left: var(--ectf-s3); }
  .ect-furniture .ectf-section { padding-top: var(--ectf-s5); }
  .ect-furniture .ectf-sechead { margin-bottom: var(--ectf-s3); }
  .ect-furniture .ectf-spectable th { width: 42%; }
}

@media (max-width: 400px) {
  /* smallest phones: drop the notification bell before anything can overflow */
  .ect-furniture .ectf-iconbtn[aria-label="Notifications"] { display: none; }
  .ect-furniture .ectf-brand-mark { width: 28px; height: 28px; font-size: 14px; }
  .ect-furniture .ectf-avatar { width: 32px; height: 32px; font-size: 13px; }
}

@media (max-width: 560px) {
  .ect-furniture .ectf-sitebar-in { height: 60px; padding: 0 var(--ectf-s2); gap: var(--ectf-s2); }
  /* brand + 3 icons + avatar + gaps exceeded 320px, pushing the bar off-screen */
  .ect-furniture .ectf-brand { font-size: 17px; }
  .ect-furniture .ectf-siteicons { gap: 0; }
  .ect-furniture .ectf-iconbtn { width: 36px; height: 36px; }
  .ect-furniture .ectf-sitesearch { display: none; }
  /* Phone: the logo goes above the text instead of beside it. A 64px logo plus
     its gap costs 80px of a ~320px card, which squeezed the tagline into a
     ~250px column and forced every meta chip onto its own line. Stacked, the
     text gets the full width and the chips sit on one or two lines. */
  .ect-furniture .ectf-hero-id { flex-direction: column; }
  .ect-furniture .ectf-trust-grid { grid-template-columns: minmax(0, 1fr); }
  .ect-furniture .ectf-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ectf-s3); }
  .ect-furniture .ectf-mchip + .ectf-mchip::before { margin-right: 7px; }
  .ect-furniture .ectf-assure { gap: var(--ectf-s2); }
  .ect-furniture .ec-store-foot { flex-direction: column; align-items: flex-start; padding: var(--ectf-s3) var(--ectf-s2); }
  /* At two-up the card is ~160px: the price must never wrap mid-amount and the
     member line must never push Add To Cart out of the tile. */
  .ect-furniture .product-card:not(.ectf-buybox) { padding: 10px; border-radius: var(--ectf-r-md); }
  .ect-furniture .product-card:not(.ectf-buybox) h3 { font-size: 13px; }
  /* "Rs 18,499 Rs 24,999" needs 131px in a 114px tile. Flex makes the amount and
     the struck-through MRP separate items, so the MRP drops to its own line
     while the amount itself still never breaks mid-number (the reason
     white-space:nowrap is kept). */
  .ect-furniture .product-card:not(.ectf-buybox) .product-price {
    font-size: 15px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 6px;
  }
  .ect-furniture .product-card:not(.ectf-buybox) .product-price del { margin-left: 0; }
  /* The member price is EarnCart's, so it may never be hidden or cut. At a
     two-up tile "Rs 17,204 with Gold membership" needs ~198px in a ~150px
     card, so it wraps to two lines instead of ellipsis-ing mid-word. */
  .ect-furniture .product-card:not(.ectf-buybox) .product-member-price {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.3;
  }
  .ect-furniture .product-card:not(.ectf-buybox) .product-actions { flex-direction: column; }
  .ect-furniture .product-card:not(.ectf-buybox) .cart-btn { width: 100%; height: 36px; font-size: 12.5px; }
}

/* Respect a user's reduced-motion setting: keep the design, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  .ect-furniture *,
  .ect-furniture *::before,
  .ect-furniture *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .ect-furniture .ectf-stage:hover img { transform: none; }
}