/* ==========================================================================
   EarnCart · READY-MADE TEMPLATE LAYOUTS
   --------------------------------------------------------------------------
   THE SECOND AXIS. skins.css is the first: it repaints the engine and may set
   custom properties and nothing else. This file is structure — the column
   grids and the sections that only exist in a multi-column design.

   Why two files instead of letting a skin do both: the moment a skin is
   allowed one layout rule, "ten templates = one engine" stops being true and
   every storefront bug has to be fixed once per template. Keeping structure
   here means a layout is picked from a short list (single / rail / sidebar)
   and any number of skins can sit on top of it.

     .ect-lay-single    the original ten. No rules here — they ARE the engine.
     .ect-lay-rail      main column + persistent right rail.  (streetwear, mono, neo)
     .ect-lay-sidebar   store aside + main + right rail.      (emporium)

   Everything is scoped under .ect-furniture for the same reason the engine is:
   this renders inside the dark marketplace SPA, which styles bare elements and
   ships !important rules. See the header of furniture.css.

   THE RAIL IS NOT DECORATION. It carries real product cards, so it collapses
   UNDER the main column on narrow screens — it is never display:none.
   ========================================================================== */


/* ==========================================================================
   1 · COLUMN GRIDS
   ========================================================================== */

.ect-furniture .ectf-cols {
  display: grid;
  gap: var(--ectf-s4);
  align-items: start;
  width: 100%;
  min-width: 0;
}

/* `minmax(0, 1fr)` on the main column, not `1fr`. A grid item's default
   min-width is auto, so one wide child — the deals scroller, a long product
   name — would otherwise push the column past its track and give the whole
   page a horizontal scrollbar. This is the same class of bug as the 320px
   aspect-ratio overflow logged in the V9 notes. */
.ect-furniture.ect-lay-rail .ectf-cols {
  grid-template-columns: minmax(0, 1fr) 340px;
}
.ect-furniture.ect-lay-sidebar .ectf-cols {
  grid-template-columns: 288px minmax(0, 1fr) 330px;
}

.ect-furniture .ectf-main,
.ect-furniture .ectf-rail,
.ect-furniture .ectf-aside { min-width: 0; }

.ect-furniture .ectf-main {
  display: flex;
  flex-direction: column;
  gap: var(--ectf-s5);
}

.ect-furniture .ectf-rail {
  display: flex;
  flex-direction: column;
  gap: var(--ectf-s3);
  position: sticky;
  top: var(--ectf-s2);
}

/* The sidebar layout's rail holds About / Reviews / Policies, which are tall.
   Sticky would pin a 2,000px column and strand the bottom of it off-screen,
   so only the short promo rail sticks. */
.ect-furniture.ect-lay-sidebar .ectf-rail { position: static; }

.ect-furniture .ectf-aside {
  position: sticky;
  top: var(--ectf-s2);
  display: flex;
  flex-direction: column;
  gap: var(--ectf-s2);
}

/* Sections inside a column lose the engine's full-bleed page padding. */
.ect-furniture .ectf-cols .ectf-section,
.ect-furniture .ectf-cols .ectf-hero,
.ect-furniture .ectf-cols .ectf-trust,
.ect-furniture .ectf-cols .ectf-featured {
  padding-left: 0;
  padding-right: 0;
}

/* The rail's own copies of About / Reviews are narrow, so their internal
   two-column grids have to fold. */
.ect-furniture.ect-lay-sidebar .ectf-rail .ectf-rv-grid,
.ect-furniture.ect-lay-sidebar .ectf-rail .ectf-about-card {
  grid-template-columns: 1fr;
  display: grid;
}
.ect-furniture.ect-lay-sidebar .ectf-rail .ectf-about-media { display: none; }


/* ==========================================================================
   2 · CATEGORY RIBBON
   The dark angled band of category tiles that all four reference designs run
   directly under the hero.
   ========================================================================== */

.ect-furniture .ectf-ribbon {
  display: flex;
  align-items: stretch;
  gap: var(--ectf-s2);
  background: var(--ectf-ink-solid);
  border-radius: var(--ectf-r-lg);
  padding: var(--ectf-s2);
  overflow: hidden;
}

.ect-furniture .ectf-ribbon-tag {
  flex: 0 0 auto;
  align-self: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--ectf-font-head, inherit);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ectf-g1);
  line-height: 1.25;
  text-align: center;
}

/* `minmax(148px, 260px)` and not `1fr`: a store with two categories would
   otherwise stretch two tiles across the whole band and read as a broken
   layout rather than a short list. Capped + justify-start means the ribbon
   looks deliberate at two categories and scrolls at ten. */
.ect-furniture .ectf-ribbon-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(148px, 260px);
  justify-content: start;
  gap: var(--ectf-s1);
  overflow-x: auto;
  scrollbar-width: thin;
  min-width: 0;
  flex: 1 1 auto;
}

/* STACKED, not side-by-side. Laid out horizontally (thumb | name | arrow) the
   name got roughly 60px in a 165px tile and every category rendered as
   "Vegeta…" / "Staple…". A truncated category is not navigation. Stacking the
   thumbnail above gives the name the tile's full width minus the arrow, which
   is enough for real category names at this size. */
.ect-furniture .ectf-tile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "img img"
    "txt go";
  align-items: end;
  gap: 9px 8px;
  padding: 10px;
  border: 0;
  border-radius: var(--ectf-r-md);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  cursor: pointer;
  text-align: left;
  transition: background .18s var(--ectf-ease), transform .18s var(--ectf-ease);
}
.ect-furniture .ectf-tile:hover { background: rgba(255, 255, 255, .13); transform: translateY(-2px); }
.ect-furniture .ectf-tile:focus-visible { outline: 2px solid var(--ectf-g1); outline-offset: 2px; }

.ect-furniture .ectf-tile-img {
  grid-area: img;
  width: 100%;
  height: 62px;
  border-radius: var(--ectf-r-sm);
  overflow: hidden;
  background: rgba(255, 255, 255, .12);
  display: block;
  position: relative;
}
.ect-furniture .ectf-tile-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ect-furniture .ectf-tile-txt { grid-area: txt; min-width: 0; display: block; }
/* Wraps to two lines rather than ellipsis. A truncated category is a category
   the buyer cannot identify — "Moisturi…" and "Peri…" are not navigation. Two
   lines is the cap; past that the name is genuinely too long for a tile. */
.ect-furniture .ectf-tile-txt b {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.22;
  color: #fff;
}
.ect-furniture .ectf-tile-txt span {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, .62);
}

.ect-furniture .ectf-tile-go {
  grid-area: go;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ectf-g1);
  color: var(--ectf-ink-solid);
  display: grid;
  place-items: center;
}
.ect-furniture .ectf-tile-go svg { width: 14px; height: 14px; }


/* ==========================================================================
   3 · DEALS STRIP
   ========================================================================== */

.ect-furniture .ectf-deals { display: flex; flex-direction: column; gap: var(--ectf-s2); }

.ect-furniture .ectf-deals-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px var(--ectf-s2);
}
.ect-furniture .ectf-deals-head h2 { margin: 0; }
.ect-furniture .ectf-deals-head p { margin: 0; font-size: 13.5px; color: var(--ectf-ink-3); }

.ect-furniture .ectf-clock {
  display: flex;
  gap: 6px;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.ect-furniture .ectf-clock span {
  display: grid;
  place-items: center;
  min-width: 46px;
  padding: 4px 6px;
  border-radius: var(--ectf-r-sm);
  background: var(--ectf-ink-solid);
  color: #fff;
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.15;
}
.ect-furniture .ectf-clock b { font-size: 16px; font-weight: 800; letter-spacing: 0; }

/* A scroll container by design — the strip is meant to run off the edge. */
.ect-furniture .ectf-deals-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(196px, 1fr);
  gap: var(--ectf-s2);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 6px;
  min-width: 0;
}
.ect-furniture .ectf-deal-cell { scroll-snap-align: start; min-width: 0; }


/* ==========================================================================
   4 · LOOKBOOK
   ========================================================================== */

.ect-furniture .ectf-look { display: flex; flex-direction: column; gap: var(--ectf-s2); }
.ect-furniture .ectf-look-head h2 { margin: 0; }
.ect-furniture .ectf-look-head p { margin: 4px 0 0; font-size: 13.5px; color: var(--ectf-ink-3); }

.ect-furniture .ectf-look-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--ectf-s2);
}

.ect-furniture .ectf-look-cell {
  position: relative;
  display: block;
  width: 100%;              /* explicit: aspect-ratio on an auto width sizes  */
  aspect-ratio: 3 / 4;      /* the BOX from the width and overflows a narrow  */
  border: 0;                /* column. Logged in V9; it repeats on every      */
  padding: 0;               /* aspect-ratio box.                              */
  overflow: hidden;
  border-radius: var(--ectf-r-md);
  background: var(--ectf-bg-soft);
  cursor: pointer;
}
.ect-furniture .ectf-look-cell img {
  position: absolute;
  inset: 0;                 /* NOT height:100% — a % height does not resolve  */
  width: 100%;              /* against a parent sized by aspect-ratio.        */
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ectf-ease);
}
.ect-furniture .ectf-look-cell:hover img { transform: scale(1.06); }
.ect-furniture .ectf-look-cell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .72) 100%);
}
.ect-furniture .ectf-look-no,
.ect-furniture .ectf-look-name { position: absolute; z-index: 1; color: #fff; }
.ect-furniture .ectf-look-no {
  top: 10px;
  right: 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  opacity: .85;
}
.ect-furniture .ectf-look-name {
  left: 12px;
  right: 12px;
  bottom: 10px;
  font-family: var(--ectf-font-head, inherit);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: left;
  line-height: 1.2;
}


/* ==========================================================================
   5 · RIGHT RAIL BLOCKS
   ========================================================================== */

.ect-furniture .ectf-rail-block {
  border: 1px solid var(--ectf-line);
  border-radius: var(--ectf-r-lg);
  background: var(--ectf-surface);
  padding: var(--ectf-s2);
}
.ect-furniture .ectf-rail-head { margin-bottom: var(--ectf-s2); }
.ect-furniture .ectf-rail-block h3 { margin: 0; font-size: 15px; }

.ect-furniture .ectf-rail-list { display: flex; flex-direction: column; gap: var(--ectf-s2); }
.ect-furniture .ectf-rail-cell { min-width: 0; }

/* -- promo card ---------------------------------------------------------- */

.ect-furniture .ectf-promo {
  position: relative;
  border-radius: var(--ectf-r-lg);
  overflow: hidden;
  background: var(--ectf-ink-solid);
  color: #fff;
  min-height: 236px;
  display: flex;
  align-items: flex-end;
}
.ect-furniture .ectf-promo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .5;
}
/* A SCRIM, not just a lowered opacity. The banner is seller-supplied and can
   be any brightness — a pale one left white body copy at roughly 1.6:1 and the
   card was unreadable. Opacity alone cannot fix that because it lightens the
   dark base too. The gradient guarantees a dark bed under the text regardless
   of the photo, and is skipped when there is no photo at all. */
.ect-furniture .ectf-promo.has-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .82) 62%);
}
.ect-furniture .ectf-promo-txt {
  position: relative;
  z-index: 1;
  padding: var(--ectf-s3) var(--ectf-s2) var(--ectf-s2);
}
.ect-furniture .ectf-promo h3 {
  margin: 0 0 6px;
  color: #fff;
  font-size: 22px;
  line-height: 1.15;
}
.ect-furniture .ectf-promo p {
  margin: 0 0 var(--ectf-s2);
  color: rgba(255, 255, 255, .76);
  font-size: 13px;
  line-height: 1.5;
}

.ect-furniture .ectf-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: none;
  padding: 0;
  color: var(--ectf-g1);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
.ect-furniture .ectf-link svg { width: 16px; height: 16px; }
.ect-furniture .ectf-link:hover svg { transform: translateX(3px); }
.ect-furniture .ectf-link svg { transition: transform .18s var(--ectf-ease); }

/* -- newsletter ---------------------------------------------------------- */

.ect-furniture .ectf-news {
  background: var(--ectf-ink-solid);
  border-color: transparent;
}
.ect-furniture .ectf-news h3 { color: #fff; }
.ect-furniture .ectf-news p {
  margin: 6px 0 var(--ectf-s2);
  color: rgba(255, 255, 255, .68);
  font-size: 13px;
}
.ect-furniture .ectf-news form { display: flex; gap: 8px; }
.ect-furniture .ectf-news input {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  border-radius: var(--ectf-r-sm);
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font: inherit;
  font-size: 13px;
}
.ect-furniture .ectf-news input::placeholder { color: rgba(255, 255, 255, .45); }
.ect-furniture .ectf-news button {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: var(--ectf-r-sm);
  background: var(--ectf-g1);
  color: var(--ectf-ink-solid);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.ect-furniture .ectf-news button svg { width: 17px; height: 17px; }
.ect-furniture .ectf-news-done { color: var(--ectf-g1); font-size: 13px; margin: 0; }


/* ==========================================================================
   6 · STORE ASIDE  (sidebar layout)
   ========================================================================== */

.ect-furniture .ectf-aside-card,
.ect-furniture .ectf-aside-nav {
  border: 1px solid var(--ectf-line);
  border-radius: var(--ectf-r-lg);
  background: var(--ectf-surface);
  padding: var(--ectf-s2);
}

.ect-furniture .ectf-aside-card { text-align: center; }
.ect-furniture .ectf-logo--lg {
  width: 76px;
  height: 76px;
  margin: 0 auto var(--ectf-s2);
  border-radius: var(--ectf-r-md);
  overflow: hidden;
}
.ect-furniture .ectf-aside-card .ectf-store-name {
  font-size: 20px;
  margin: 0;
  justify-content: center;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ect-furniture .ectf-aside-card .ectf-store-line {
  margin: 6px 0 var(--ectf-s2);
  font-size: 13px;
  color: var(--ectf-ink-3);
}

.ect-furniture .ectf-aside-rate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  color: var(--ectf-ink-3);
  margin-bottom: var(--ectf-s2);
}

.ect-furniture .ectf-aside-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--ectf-line);
  border: 1px solid var(--ectf-line);
  border-radius: var(--ectf-r-md);
  overflow: hidden;
  margin-bottom: var(--ectf-s2);
}
.ect-furniture .ectf-aside-stats div {
  background: var(--ectf-surface);
  padding: 10px 6px;
}
.ect-furniture .ectf-aside-stats b { display: block; font-size: 15px; font-weight: 800; }
.ect-furniture .ectf-aside-stats span { display: block; font-size: 11px; color: var(--ectf-ink-3); }

.ect-furniture .ectf-aside-cta { display: flex; flex-direction: column; gap: 8px; }
.ect-furniture .ectf-aside-cta .ectf-btn { width: 100%; justify-content: center; }

.ect-furniture .ectf-aside-nav h3 {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ectf-ink-3);
}
.ect-furniture .ectf-aside-nav button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--ectf-r-sm);
  background: none;
  color: var(--ectf-ink);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  text-align: left;
}
.ect-furniture .ectf-aside-nav button:hover { background: var(--ectf-bg-soft); }
.ect-furniture .ectf-aside-nav button span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ect-furniture .ectf-aside-nav button b { font-size: 11px; color: var(--ectf-ink-3); font-weight: 600; }
.ect-furniture .ectf-aside-nav button svg { width: 14px; height: 14px; color: var(--ectf-ink-3); flex: 0 0 auto; }


/* ==========================================================================
   6b · THE MEMBER PRICE MUST NOT BE CLIPPED IN A NARROW CELL
   --------------------------------------------------------------------------
   furniture.css already unclamps .product-member-price, but it does it inside
   `@media (max-width: 560px)` — a VIEWPORT rule. These layouts put full-size
   cards into ~196px cells at a 1440px viewport, so that rule never fires and
   the line came back as "Rs 26 with Gold membe…".

   The member price is EarnCart's line, not the template's, and truncating it
   is the exact bug 7G/V9 exist to prevent. Keyed off the CELL here, so it
   holds at every viewport width instead of only on phones.
   ========================================================================== */

/* MATCH THE ENGINE'S SPECIFICITY OR THIS SILENTLY DOES NOTHING.
   The rule being overridden is
     .ect-furniture .product-card:not(.ectf-buybox) .product-member-price
   which is (0,4,0) — `:not()` contributes its ARGUMENT's specificity, so the
   `:not(.ectf-buybox)` counts as a class. A tidier
   `.ect-furniture .ectf-deal-cell .product-member-price` is only (0,3,0) and
   loses. First attempt did exactly that and looked like it worked, because
   the rail cell happens to be wide enough for the line to fit anyway; only
   the 196px deal cell exposed it. */
.ect-furniture .ectf-deal-cell .product-card:not(.ectf-buybox) .product-member-price,
.ect-furniture .ectf-rail-cell .product-card:not(.ectf-buybox) .product-member-price {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  display: block;
  -webkit-line-clamp: none;
  line-height: 1.35;
}

/* The amount itself still never breaks mid-number; the struck MRP drops a line
   instead. Same fix as the 320px pass, applied per cell rather than per
   viewport. */
.ect-furniture .ectf-deal-cell .product-card:not(.ectf-buybox) .product-price,
.ect-furniture .ectf-rail-cell .product-card:not(.ectf-buybox) .product-price {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  white-space: normal;
}


/* ==========================================================================
   7 · RESPONSIVE
   The rail and the aside FOLD into the main column. They are never hidden:
   both carry real products and the store's own identity, and a phone buyer
   must not get a lesser catalogue than a desktop one.
   ========================================================================== */

@media (max-width: 1180px) {
  .ect-furniture.ect-lay-sidebar .ectf-cols { grid-template-columns: 260px minmax(0, 1fr); }
  .ect-furniture.ect-lay-sidebar .ectf-rail { grid-column: 1 / -1; }
  .ect-furniture.ect-lay-sidebar .ectf-rail { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ectf-s3); }
}

@media (max-width: 1080px) {
  .ect-furniture.ect-lay-rail .ectf-cols { grid-template-columns: minmax(0, 1fr); }
  .ect-furniture.ect-lay-rail .ectf-rail {
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--ectf-s2);
  }
}

@media (max-width: 900px) {
  .ect-furniture.ect-lay-sidebar .ectf-cols { grid-template-columns: minmax(0, 1fr); }
  .ect-furniture .ectf-aside { position: static; }
  .ect-furniture.ect-lay-sidebar .ectf-rail { grid-template-columns: minmax(0, 1fr); }
  /* The aside is the store's identity — it leads the page on a phone, exactly
     as the hero does on the single-column layouts. */
  .ect-furniture .ectf-aside-stats { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 640px) {
  .ect-furniture .ectf-cols { gap: var(--ectf-s3); }
  .ect-furniture .ectf-main { gap: var(--ectf-s4); }
  .ect-furniture .ectf-ribbon-tag { display: none; }
  .ect-furniture .ectf-ribbon-track { grid-auto-columns: minmax(132px, 1fr); }
  .ect-furniture .ectf-deals-track { grid-auto-columns: minmax(156px, 1fr); }
  .ect-furniture .ectf-look-grid { grid-template-columns: 1fr 1fr; }
  .ect-furniture .ectf-aside-stats { grid-template-columns: 1fr 1fr; }
  .ect-furniture .ectf-clock { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ect-furniture .ectf-tile,
  .ect-furniture .ectf-look-cell img,
  .ect-furniture .ectf-link svg { transition: none; }
  .ect-furniture .ectf-look-cell:hover img { transform: none; }
}