/* ES standard v2 (component theme 5) — HOME blocks: hero, promo trio, heading
   container (title / countdown / feed tabs / view all + grid or circle row),
   category circles, campaign pair, recently viewed.
   Source: dev_template/UI mockups setup/Marketplace Pro.dc.html lines 143–284;
   every value is the design's literal inline value. The design's cqi units
   resolve against the viewport there, so they are ported as vw. The design's
   "mob" layout starts under 1000px. RTL through logical properties; the
   arrows flip under [dir="rtl"]. Every rule is scoped to .sf-scope[data-ct="5"]. */

/* ---- shared: block roots keep the design's normal line-height, image + placeholder slots ---- */
.sf-scope[data-ct="5"] .es-hero,
.sf-scope[data-ct="5"] .es-promos,
.sf-scope[data-ct="5"] .es-sect,
.sf-scope[data-ct="5"] .es-camps,
.sf-scope[data-ct="5"] .es-recent { line-height: normal; }
.sf-scope[data-ct="5"] .es-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf-scope[data-ct="5"] .es-slot { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: inherit; color: inherit; }
.sf-scope[data-ct="5"] .es-slot::before { content: ""; position: absolute; inset: 0; border: 1.5px dashed currentColor; border-radius: inherit; opacity: .35; pointer-events: none; }
.sf-scope[data-ct="5"] .es-slot__icon { width: 28px; height: 28px; opacity: .45; }
.sf-scope[data-ct="5"] .es-flip { flex: none; }
[dir="rtl"] .sf-scope[data-ct="5"] .es-flip { transform: scaleX(-1); }

/* ---- hero: navy panel, copy on the start side, picture on the end side ---- */
.sf-scope[data-ct="5"] .es-hero { display: flex; flex-wrap: wrap; background: var(--es-navy); color: #fff; border-radius: 28px; overflow: hidden; }
.sf-scope[data-ct="5"] .es-hero__body { flex: 1 1 380px; min-width: 0; padding: clamp(28px, 5vw, 64px); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 18px; }
.sf-scope[data-ct="5"] .es-hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: 13px; font-weight: 500; color: #E2E8F0; }
.sf-scope[data-ct="5"] .es-hero__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--es-amber); }
.sf-scope[data-ct="5"] .es-hero__title { margin: 0; font-size: clamp(32px, 4.4vw, 58px); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; color: #fff; text-wrap: balance; }
.sf-scope[data-ct="5"] .es-hero__text { margin: 0; max-width: 48ch; font-size: clamp(15px, 1.25vw, 17px); line-height: 1.65; color: #CBD5E1; text-wrap: pretty; }
.sf-scope[data-ct="5"] .es-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.sf-scope[data-ct="5"] .es-hero__btn { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 14px; border: 0; background: var(--es-amber); color: var(--es-navy); font-size: 15px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.sf-scope[data-ct="5"] .es-hero__btn:hover { background: #FBBF24; color: var(--es-navy); }
.sf-scope[data-ct="5"] .es-hero__ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .28); background: transparent; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.sf-scope[data-ct="5"] .es-hero__ghost:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sf-scope[data-ct="5"] .es-hero__media { position: relative; flex: 1 1 360px; min-width: 0; min-height: clamp(260px, 32vw, 460px); background: #1E293B; }

/* ---- promo trio: three tiles 14px under the hero. The design keeps hero + tiles in ONE section
   (gap 14px); here they are two blocks separated by the page gap, so the tiles pull back
   (page gap - 14px). The lead may set --es-main-gap on .es-main to the page's real gap. ---- */
.sf-scope[data-ct="5"] .es-promos { list-style: none; margin: calc(14px - var(--es-main-gap, clamp(44px, 5vw, 72px))) 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; }
.sf-scope[data-ct="5"] .es-promos__item { scroll-snap-align: start; display: flex; }
.sf-scope[data-ct="5"] .es-promo { flex: 1; display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 20px; border: 1px solid #E2E8F0; background: #fff; color: #1E293B; cursor: pointer; text-align: start; transition: box-shadow 200ms; }
.sf-scope[data-ct="5"] .es-promo:hover { color: #1E293B; box-shadow: 0 10px 28px rgba(15, 23, 42, .08); }
.sf-scope[data-ct="5"] .es-promo__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sf-scope[data-ct="5"] .es-promo__title { font-size: 16px; font-weight: 700; }
.sf-scope[data-ct="5"] .es-promo__sub { font-size: 13px; color: #64748B; }
.sf-scope[data-ct="5"] .es-promo__cta { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--es-blue); }
.sf-scope[data-ct="5"] .es-promo__media { position: relative; flex: none; width: 96px; height: 96px; border-radius: 14px; overflow: hidden; background: var(--es-amber-soft); }
.sf-scope[data-ct="5"] .es-promos__item:nth-child(2) .es-promo__media { background: #FCE7F3; }
.sf-scope[data-ct="5"] .es-promos__item:nth-child(3) .es-promo__media { background: #DCFCE7; }

/* ---- heading container: title row, countdown pill, feed tabs, view all ---- */
.sf-scope[data-ct="5"] .es-sect__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.sf-scope[data-ct="5"] .es-sect__head--wrap { flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.sf-scope[data-ct="5"] .es-sect__lead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.sf-scope[data-ct="5"] .es-sect__eyebrow { width: 100%; margin: 0; font-size: 13px; font-weight: 600; color: #64748B; }
.sf-scope[data-ct="5"] .es-sect__title { margin: 0; font-size: clamp(22px, 2.1vw, 28px); font-weight: 700; line-height: normal; letter-spacing: -0.02em; color: #1E293B; }
.sf-scope[data-ct="5"] .es-sect__timer { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--es-amber-soft); color: var(--es-amber-ink); font-size: 13px; font-weight: 600; white-space: nowrap; }
.sf-scope[data-ct="5"] .es-sect__timer svg { flex: none; }
/* the clock reads "08:07:52" as one inline run (the design's <bdi>); the days group
   ("3d ") is inline too and es.js hides it while it reads 00 */
.sf-scope[data-ct="5"] .es-sect__units { display: inline; gap: 0; margin: 0; padding: 0; font-variant-numeric: tabular-nums; font-weight: 800; line-height: normal; }
.sf-scope[data-ct="5"] .es-sect__units [data-unit],
.sf-scope[data-ct="5"] .es-sect__days { display: inline; margin: 0; padding: 0; }
.sf-scope[data-ct="5"] .es-sect__units[hidden],
.sf-scope[data-ct="5"] .es-sect__over[hidden],
.sf-scope[data-ct="5"] .es-sect__days[hidden] { display: none; }
.sf-scope[data-ct="5"] .es-sect__timer.sf-countdown--ended .es-sect__timerlabel { display: none; }
.sf-scope[data-ct="5"] .es-sect__tabs { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: #F1F5F9; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.sf-scope[data-ct="5"] .es-sect__tabs::-webkit-scrollbar { display: none; }
.sf-scope[data-ct="5"] .es-sect__tab { flex: none; min-height: 38px; padding: 0 14px; border-radius: 10px; border: 0; background: transparent; color: #64748B; box-shadow: none; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.sf-scope[data-ct="5"] .es-sect__tab:hover { color: #1E293B; }
.sf-scope[data-ct="5"] .es-sect__tab.is-on { background: #fff; color: var(--es-navy); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.sf-scope[data-ct="5"] .es-sect__link { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 1px 6px; background: none; border: 0; color: var(--es-blue); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.sf-scope[data-ct="5"] .es-sect__link:hover { color: var(--es-blue-ink); }
.sf-scope[data-ct="5"] .es-sect__body[aria-busy="true"] { transition: opacity 150ms; }

/* ---- card grid (deals / featured / recent): 4 across at 20px, 2 across at 12px under 1000px ---- */
.sf-scope[data-ct="5"] .es-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(220px, calc((100% - (var(--es-cols-d, 4) - 1) * 20px) / var(--es-cols-d, 4))), 1fr)); gap: 20px; }
.sf-scope[data-ct="5"] .es-grid > * { min-width: 0; display: flex; flex-direction: column; }

/* ---- circle row: one line of equal columns, scrolls sideways on phones ---- */
/* Circle rows ("Shop by category" / brands): one line of equal circles. The selector carries
   .es-sect__body + [data-sf-grid] so it outranks the card-grid rule catalog.css puts on every
   [data-sf-grid] (same file order problem: catalog.css loads after this file). */
.sf-scope[data-ct="5"] .es-sect__row,
.sf-scope[data-ct="5"] .es-sect__body.es-sect__row[data-sf-grid] { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; overflow-x: auto; margin: 0; padding: 0 0 4px; }
.sf-scope[data-ct="5"] .es-sect__body.es-sect__row[data-sf-grid] > * { display: flex; flex-direction: column; min-width: 0; }
.sf-scope[data-ct="5"] .es-circle { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: #1E293B; cursor: pointer; }
.sf-scope[data-ct="5"] .es-circle:hover { color: #1E293B; }
.sf-scope[data-ct="5"] .es-circle__disc { display: block; position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; background: #E0E7FF; transition: transform 200ms; }
.sf-scope[data-ct="5"] .es-circle:hover .es-circle__disc { transform: scale(1.04); }
.sf-scope[data-ct="5"] .es-circle__name { font-size: 13px; font-weight: 600; text-align: center; line-height: 1.3; }
.sf-scope[data-ct="5"] .es-circle__mono { font-size: 22px; font-weight: 700; letter-spacing: .02em; opacity: .7; }
.sf-scope[data-ct="5"] .es-sect__row > :nth-child(8n+1) .es-circle__disc { background: #E0E7FF; }
.sf-scope[data-ct="5"] .es-sect__row > :nth-child(8n+2) .es-circle__disc { background: #FEF3C7; }
.sf-scope[data-ct="5"] .es-sect__row > :nth-child(8n+3) .es-circle__disc { background: #FCE7F3; }
.sf-scope[data-ct="5"] .es-sect__row > :nth-child(8n+4) .es-circle__disc { background: #EDE9FE; }
.sf-scope[data-ct="5"] .es-sect__row > :nth-child(8n+5) .es-circle__disc { background: #DCFCE7; }
.sf-scope[data-ct="5"] .es-sect__row > :nth-child(8n+6) .es-circle__disc { background: #CFFAFE; }
.sf-scope[data-ct="5"] .es-sect__row > :nth-child(8n+7) .es-circle__disc { background: #FFEDD5; }
.sf-scope[data-ct="5"] .es-sect__row > :nth-child(8n+8) .es-circle__disc { background: #FEE2E2; }

/* ---- campaign pair: blue card + amber-soft card, picture on the end 38% ---- */
.sf-scope[data-ct="5"] .es-camps { display: flex; flex-wrap: wrap; gap: 16px; }
.sf-scope[data-ct="5"] .es-camp { flex: 1 1 380px; min-width: 0; display: flex; border-radius: 24px; overflow: hidden; }
.sf-scope[data-ct="5"] .es-camp--blue { background: var(--es-blue); color: #fff; }
.sf-scope[data-ct="5"] .es-camp--amber { background: var(--es-amber-soft); color: var(--es-navy); }
.sf-scope[data-ct="5"] .es-camp__body { flex: 1 1 0; min-width: 0; padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; }
.sf-scope[data-ct="5"] .es-camp__eyebrow { font-size: 13px; font-weight: 600; color: var(--es-blue-soft-2); }
.sf-scope[data-ct="5"] .es-camp--amber .es-camp__eyebrow { font-weight: 700; color: var(--es-amber-ink); }
.sf-scope[data-ct="5"] .es-camp__title { margin: 0; font-size: clamp(22px, 2.4vw, 32px); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: inherit; }
.sf-scope[data-ct="5"] .es-camp__text { margin: 0; font-size: 14px; line-height: 1.6; color: #E0EAFF; max-width: 34ch; }
.sf-scope[data-ct="5"] .es-camp--amber .es-camp__text { color: #57400E; }
.sf-scope[data-ct="5"] .es-camp__btn { display: inline-flex; align-items: center; justify-content: center; margin-top: 6px; min-height: 46px; padding: 0 20px; border-radius: 12px; border: 0; background: #fff; color: var(--es-blue-ink); font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.sf-scope[data-ct="5"] .es-camp__btn:hover { background: var(--es-blue-soft); color: var(--es-blue-ink); }
.sf-scope[data-ct="5"] .es-camp--amber .es-camp__btn { background: var(--es-navy); color: #fff; }
.sf-scope[data-ct="5"] .es-camp--amber .es-camp__btn:hover { background: #1E293B; color: #fff; }
.sf-scope[data-ct="5"] .es-camp__media { position: relative; flex: 0 0 38%; min-width: 0; max-width: 38%; min-height: 220px; overflow: hidden; }

/* ---- recently viewed: title + the card grid, hidden until es.js fills it ---- */
.sf-scope[data-ct="5"] .es-recent[hidden] { display: none; }
.sf-scope[data-ct="5"] .es-recent__title { margin: 0 0 20px; line-height: normal; }

/* ---- the design's "mob" layout (< 1000px) ---- */
@media (max-width: 999px) {
    .sf-scope[data-ct="5"] .es-promos { grid-auto-columns: 82%; }
    .sf-scope[data-ct="5"] .es-grid { grid-template-columns: repeat(var(--es-cols-m, 2), minmax(0, 1fr)); gap: 12px; }
    /* the design keeps the 16px gap on phones (84px circles) */
    .sf-scope[data-ct="5"] .es-sect__row,
    .sf-scope[data-ct="5"] .es-sect__body.es-sect__row[data-sf-grid] { grid-template-columns: none; grid-auto-columns: 84px; gap: 16px; }
}