/* ===== "השוק החי" (the live market): the home page's stage, scene, tiles and motion. Loaded after apple.css. =====
   One motion set: --ease (critically damped feel), durations 160 / 240 / 420 / 700ms. Transform and opacity only.
   Everything renders in its final state without script; reduced motion (system or the site's toggle) shows it still. */
:root{--d1:160ms;--d2:240ms;--d3:420ms;--d4:700ms}

/* ---------- Hero: copy at the start, the live stage beside it ---------- */
.home-hero.has-stage.band{padding:48px 0 56px!important;text-align:start;overflow:hidden!important}
.home-hero.has-stage .hero-in{display:grid!important;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-areas:"title title" "copy stage";align-items:center;column-gap:clamp(24px,4vw,64px);row-gap:8px}
.home-hero.has-stage h1{grid-area:title}.home-hero.has-stage .hero-copy{grid-area:copy}.home-hero.has-stage .stage{grid-area:stage}
.home-hero.has-stage .hero-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.home-hero.has-stage h1{font-size:clamp(40px,6vw,88px)!important;text-align:start;letter-spacing:-.03em!important;animation:rise 600ms var(--ease) both}
.home-hero.has-stage .hero-sub{text-align:start;margin:0 0 24px!important;max-width:34ch!important}
/* The second explanatory line sits close under the first; phones keep one line so the stage stays in the first screen. */
.home-hero .hero-sub:has(+.hero-sub-more){margin-bottom:8px!important}
.home-hero .hero-sub{text-wrap:balance}
.home-hero .hero-sub-more{font-size:var(--fs-b)!important}
@media(max-width:620px){.home-hero .hero-sub:has(+.hero-sub-more){margin-bottom:16px!important}.home-hero .hero-sub-more{display:none}}
.home-hero.has-stage .hero-search{width:100%}
.home-hero.has-stage .why-line,.home-hero.has-stage .hero-ctas,.home-hero.has-stage .hero-activity{justify-content:flex-start!important}
.home-hero.has-stage .hero-copy>*{animation:rise 600ms var(--ease) both}
.home-hero.has-stage .hero-copy>.hero-sub{animation-delay:60ms}.home-hero.has-stage .hero-copy>.hero-search{animation-delay:120ms}.home-hero.has-stage .hero-copy>.why-line{animation-delay:160ms}.home-hero.has-stage .hero-copy>.hero-ctas{animation-delay:200ms}
.home-hero.has-stage .hero-in>.stage{animation:none}

/* The stage: real listings in an arc; the front card in the middle, the rest step back to either side. */
.home-hero.has-stage .hero-in{justify-items:stretch!important}
.stage{position:relative;height:440px;min-width:0;width:100%;justify-self:stretch}
.stage-track{position:absolute;inset:0}
.stage-card{position:absolute;left:50%;top:50%;width:min(260px,46%);display:flex;flex-direction:column;background:#fff;border-radius:24px;overflow:hidden;color:var(--ink);text-decoration:none;
 transform:translate(-50%,-50%) translateX(calc(var(--o) * -60%)) scale(calc(1 - var(--a) * .12));z-index:calc(10 - var(--a));opacity:1;
 transition:transform var(--d4) var(--ease),opacity var(--d3) var(--ease)}
.stage-card.far{opacity:0;pointer-events:none}
/* Cards further back sink into the navy (an overlay that fades), so overlapping cards never show through each other. */
.stage-card:after{content:"";position:absolute;inset:0;z-index:3;background:var(--navy);opacity:calc(var(--a) * .3);pointer-events:none;border-radius:inherit;transition:opacity var(--d4) var(--ease)}
/* Side cards show their photo only; the text belongs to the card in front (each card is still a named link). */
@media(min-width:901px){.stage-card:not(.front) .sc-body{display:none}}
.stage{overflow:hidden;border-radius:28px}
@media(prefers-reduced-motion:no-preference){html:not(.a11y-motion) .stage:not(.ready) .stage-card{opacity:0;transform:translate(-50%,-40%) scale(.94)}}
.stage-card:not(.front){cursor:pointer}

.stage-card:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.sc-pic{display:block;aspect-ratio:4/3.2;background:#f5f5f7;position:relative}
.sc-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:9%;transition:transform var(--d4) var(--ease)}
.stage-card.front:hover .sc-pic img{transform:scale(1.04)}
.sc-body{display:grid;gap:2px;padding:14px 18px 16px;transition:opacity var(--d3) ease}
.sc-title{font-size:var(--fs-b);font-weight:600;line-height:1.3;white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;unicode-bidi:plaintext;min-height:2.6em}
.sc-line{display:flex;align-items:baseline;gap:10px}
.sc-line .price{font-size:var(--fs-t);font-weight:600;color:var(--navy)}
.sc-line .timer{margin-inline-start:auto;font-size:var(--fs-s);color:var(--muted);font-variant-numeric:tabular-nums}
.sc-line .timer.red{color:var(--navy);font-weight:600}
.sc-bids{font-size:var(--fs-s);color:var(--accent-ink)}

/* Pause for the moving stage (WCAG 2.2.2): small, at the stage's end corner; hidden where nothing moves. */
.stage-pause{position:absolute;inset-inline-end:8px;bottom:8px;z-index:20;width:40px;height:40px;border-radius:var(--pill);display:grid;place-items:center;background:rgba(255,255,255,.12);color:#fff;transition:background-color var(--d1) ease,transform var(--d1) var(--ease)}
.stage-pause:hover{background:rgba(255,255,255,.22)}.stage-pause:active{transform:scale(.94)}
.stage-pause:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:900px){.stage-pause{display:none}}
@media(prefers-reduced-motion:reduce){.stage-pause{display:none}}
html.a11y-motion .stage-pause{display:none}

/* ---------- "איך Nickel עובד": the scene ---------- */
.how3.how-scene.band{padding:96px 0!important}
.scene-copy .home-h2{color:#fff!important;font-size:var(--fs-h)!important;margin:0 0 14px!important}
.scene-copy .how3-lead{margin:0 0 36px!important;max-width:40ch!important}
.how3-steps li .st-text h3{margin:0 0 6px!important}
.scene-btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border-radius:var(--pill);background:var(--accent);color:var(--navy)!important;font-weight:600;font-size:var(--fs-b);text-decoration:none!important;border:0;transition:transform var(--d1) var(--ease),background-color var(--d1) ease}
.scene-btn:hover{background:var(--accent-hover)}
.scene-btn:active{transform:scale(.97)}
.scene-btn.ghost{background:rgba(255,255,255,.12);color:#fff!important}
.scene-btn.ghost:hover{background:rgba(255,255,255,.2)}
.scene-btn .ic{transition:transform var(--d2) var(--ease)}
.scene-btn:hover .ic{transform:translateX(-3px)}
.how3-links{gap:12px!important;margin-top:40px!important}
.how3 :is(a,button):focus-visible{outline-color:var(--accent);border-radius:var(--pill)}

/* The picture: a grid of products, one card, a locker. Sized as a container so the card can travel in its units. */
.sv{position:relative;width:min(460px,100%);aspect-ratio:520/494;margin-inline:auto;container-type:size}
.sv-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:4%;padding:2%;transition:opacity var(--d3) var(--ease),transform var(--d4) var(--ease)}
.sv-tile{display:grid;place-items:center;background:rgba(255,255,255,.07);border-radius:18px}
.sv-tile .product-illustration{width:70%!important;height:auto;opacity:.75}
.sv-pick{background:rgba(255,255,255,.03)}.sv-pick .product-illustration{opacity:.15}
.sv-locker{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:translateY(4%);transition:opacity var(--d3) var(--ease),transform var(--d4) var(--ease)}
.lk-body{fill:#15407d}.lk-cell{fill:#0d3069}.lk-target{fill:#0a2655}.lk-handle{fill:#2f5b9a}
.sv-door{position:absolute;left:35.4%;top:35.2%;width:27.7%;height:27.1%;border-radius:12px;background:#1d4f94;transform-origin:100% 50%;transform:scaleX(0);transition:transform var(--d3) var(--ease);z-index:3}
.sv-door:after{content:"";position:absolute;inset-inline-end:14%;top:42%;width:4%;height:16%;border-radius:3px;background:var(--accent)}
.sv-check{position:absolute;left:49.3%;top:48.7%;z-index:4;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:var(--accent);color:var(--navy);display:grid;place-items:center;opacity:0;transform:scale(.8);transition:opacity var(--d2) var(--ease),transform var(--d3) var(--ease)}
.sv-card{position:absolute;left:50%;top:44%;width:46%;z-index:2;background:#fff;border-radius:22px;overflow:hidden;display:flex;flex-direction:column;transform:translate(-50%,-50%) translate(33cqw,-19cqh) scale(.34);transition:transform var(--d4) var(--ease),opacity var(--d3) var(--ease)}
.sv-pic{display:grid;place-items:center;aspect-ratio:4/3;background:#f5f5f7}
.sv-pic .product-illustration{width:62%!important;height:auto}
.sv-line{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:12px 16px 14px;direction:rtl}
.sv-price{font-size:var(--fs-t);font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums}
.sv-timer{font-size:var(--fs-s);color:var(--muted);font-variant-numeric:tabular-nums;direction:ltr}
.scene-live[data-step="0"] .sv-card{transform:translate(-50%,-50%) translateY(-6cqh) scale(.92)}
.sv-line{opacity:0;transition:opacity var(--d2) var(--ease)}
.scene-live[data-step] .sv-line{opacity:1}
.scene-live[data-step="1"] .sv-grid{opacity:0;transform:translateY(5%)}
.scene-live[data-step="1"] .sv-card{transform:translate(-50%,-50%) translateY(2cqh) scale(1.06)}
.scene-live[data-step="2"] .sv-grid{opacity:0}
.scene-live[data-step="2"] .sv-locker{opacity:1;transform:none}
.scene-live[data-step="2"] .sv-card{transform:translate(-50%,-50%) translateX(-1cqw) translateY(5cqh) scale(.27)}
.scene-live[data-step="2"] .sv-door{transform:scaleX(1);transition-delay:650ms}
.scene-live[data-step="2"] .sv-check{opacity:1;transform:none;transition-delay:1050ms}

/* Computers: two columns in normal flow, the height comes from the content. The picture may stay in view inside its
   own column (plain CSS); the page itself is never held. */
@media(min-width:1024px){
 .scene-live .how-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:clamp(32px,5vw,80px)}
 .scene-live .scene-stage{position:sticky;top:calc(var(--header-h,64px) + 32px)}
 .scene-live .st-vis{display:none}
 .scene-live .how3-steps{gap:88px!important;grid-template-columns:1fr!important}
 .scene-live .how3-steps li{opacity:.72;transition:opacity var(--d3) var(--ease)}
 .scene-live .how3-steps li.on{opacity:1}
 .scene-live .how3-steps li.done{opacity:.8}
 .scene-live .how3-steps li:not(.on) h3{color:var(--navy-ink)!important}
 .scene-live .how3-steps li.on h3{color:var(--accent)!important}
}
/* Phones and reduced motion: the steps stacked, each with its own small picture in its final state. */
.how3.how-scene:not(.scene-live) .scene-stage{display:none}
.how3.how-scene:not(.scene-live) .how3-steps{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:32px!important}
.how3.how-scene:not(.scene-live) .how3-steps li{display:flex!important;flex-direction:column;gap:18px}
.st-vis{max-width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;height:120px;border-radius:20px;background:rgba(255,255,255,.06);order:-1}
.st-find span{width:52px;height:52px;flex:none;border-radius:12px;background:rgba(255,255,255,.07);display:grid;place-items:center;transition:transform var(--d3) var(--ease),background-color var(--d3) ease}
.st-find .product-illustration{width:80%!important;height:auto}
.st-find span.on{background:#fff;transform:translateY(-10px) scale(1.12)}
.st-bid{flex-direction:column;gap:2px;background:#fff}
.st-bid .sv-price{font-size:var(--fs-h)}
.st-win{position:relative}
.st-win>svg:not(.ic){width:160px;height:100px}
.st-win .ic{position:absolute;color:var(--navy);background:var(--accent);border-radius:50%;padding:6px;width:36px;height:36px}
@media(max-width:1023px){.how3.how-scene:not(.scene-live) .how3-steps{grid-template-columns:minmax(0,1fr)!important}.how3.how-scene:not(.scene-live) .how3-steps li{flex-direction:row;align-items:center}.how3.how-scene:not(.scene-live) .st-vis{flex:0 0 120px;height:104px}.how3.how-scene:not(.scene-live) .st-find{display:grid;grid-template-columns:repeat(2,36px);place-content:center;gap:8px}.how3.how-scene:not(.scene-live) .st-find span{width:36px;height:36px}.how3.how-scene:not(.scene-live) .st-bid .sv-price{font-size:var(--fs-t)}.how3.how-scene:not(.scene-live) .st-win>svg:not(.ic){width:104px;height:66px}}
/* One-time entrance for the small pictures (phones): the chosen product lifts, the check lands. */
.scene-flat li .st-find span.on{transform:none;background:rgba(255,255,255,.07)}
.scene-flat li.in .st-find span.on{transform:translateY(-5px) scale(1.12);background:#fff;transition-delay:200ms}
.scene-flat li .st-win .ic{opacity:0;transform:scale(.8);transition:opacity var(--d2) var(--ease) 400ms,transform var(--d3) var(--ease) 400ms}
.scene-flat li.in .st-win .ic{opacity:1;transform:none}

/* ---------- Recently sold ---------- */
.sold-price b{font-variant-numeric:tabular-nums}
.sold-one .sold-list{grid-template-columns:minmax(0,1fr)!important}
@media(min-width:901px){
 .sold-one .sold-list li a{display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:48px;align-items:center}
 .sold-one .sold-pic{grid-row:1/4;aspect-ratio:4/3;margin:0!important}
 .sold-one .sold-price b{font-size:clamp(40px,6vw,88px)!important}
 .sold-one .sold-title{font-size:var(--fs-t)!important}
}

/* ---------- Popular categories: photo tiles, a mosaic of sizes ---------- */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(170px,16vw,230px);gap:16px}
.bt-0{grid-column:span 2;grid-row:span 2}.bt-3,.bt-4,.bt-5{grid-column:span 2}
.bento-tile{position:relative;overflow:hidden;border-radius:var(--r-l);background:#f5f5f7;padding:0;text-align:start;color:#fff;isolation:isolate;transition:transform var(--d1) var(--ease)}
.bento-tile:active{transform:scale(.985)}
.bento-pic{position:absolute;inset:0;display:grid;place-items:center}
.bento-pic img{width:100%;height:100%;object-fit:cover;transition:transform var(--d4) var(--ease)}
.bento-tile:hover .bento-pic img{transform:scale(1.05)}
.bento-pic .product-illustration{width:46%!important;height:auto}
.bento-tile:not(.no-photo):after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(5,16,36,.72),rgba(5,16,36,0) 58%);pointer-events:none} /* taste-skill-ignore: neutral scrim for legibility over a photo */
.bento-text{position:absolute;inset-inline:22px;bottom:18px;z-index:2;display:grid;gap:2px}
.bento-text b{font-size:var(--fs-t);font-weight:600;line-height:1.25}
.bt-0 .bento-text b{font-size:var(--fs-h)}
.bento-text span{font-size:var(--fs-s);opacity:.9}
.bento-tile.no-photo{color:var(--ink)}
.bento-tile:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.cats.band{text-align:start!important}
.cats .sectionhead{margin-bottom:28px!important}

/* ---------- Picks: a scroll-driven entrance where the browser has one (motion.js covers the rest) ---------- */
@supports (animation-timeline: view()){
 .grid-lite .card{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
}

/* ---------- Phones ---------- */
@media(max-width:900px){
 .home-hero.has-stage .hero-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "copy" "stage"}
 .sold-list{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))!important}
 .item-media{display:contents!important}.item .item-media>.gallery{order:2}.item .photo-credit{order:5}
 .stage{height:auto;margin:32px 0 0}
 .stage-track{position:static;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 0 12px;scrollbar-width:none;overscroll-behavior-x:contain}
 .stage-track::-webkit-scrollbar{display:none}
 .stage-card,.stage:not(.ready) .stage-card,.stage-card.far{position:relative;left:auto;top:auto;flex:0 0 74%;transform:none!important;opacity:1!important;pointer-events:auto;z-index:auto;scroll-snap-align:center;box-shadow:none}
 .stage-card:not(.front) .sc-body{opacity:1}
 .stage-card:after{display:none}
 .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:150px;gap:10px}
 .bt-0{grid-column:span 2;grid-row:span 2}.bt-3,.bt-4,.bt-5{grid-column:span 1}.bt-3{grid-column:span 2}
}
@media(max-width:620px){
 .home-hero.has-stage.band{padding:28px 0 40px!important}
 .home-hero.has-stage h1{font-size:clamp(32px,9.6vw,42px)!important}
 .bento-text{inset-inline:16px;bottom:14px}
 .bento-text b{font-size:var(--fs-b)}.bt-0 .bento-text b{font-size:var(--fs-t)}
}

/* ---------- Reduced motion: final states, still ---------- */
@media(prefers-reduced-motion:reduce){
 .stage-card,.sc-pic img,.bento-pic img,.sv-card,.sv-grid,.sv-locker,.sv-door,.sv-check,.st-find span,.st-win .ic,.scene-btn,.scene-btn .ic{transition:none!important;animation:none!important}
 .home-hero.has-stage .hero-copy>*,.grid-lite .card{animation:none!important}
}
html.a11y-motion :is(.stage-card,.sc-pic img,.bento-pic img,.sv-card,.st-find span,.st-win .ic,.home-hero.has-stage .hero-copy>*,.grid-lite .card){transition:none!important;animation:none!important}

/* One sale on phones and tablets: the picture wide, the price large under it. */
@media(max-width:900px){
 .sold-one .sold-list li a{display:flex!important;flex-direction:column;align-items:stretch;gap:6px}
 .sold-one .sold-pic{width:100%!important;height:auto!important;aspect-ratio:16/10;border-radius:var(--r-m)}
 .sold-one .sold-price b{font-size:var(--fs-h)!important}
}
/* Phones: the price keeps its label on its own line-free row; the time moves under it when needed. */
@media(max-width:620px){.ab-price{flex-wrap:nowrap!important;white-space:nowrap}.auction-box .ab-row{flex-wrap:wrap!important}}

/* Product page: a time left in days reads as words, set at the title size (digits keep the large size). */
.ab-time .timer.days{font-size:var(--fs-t)!important;font-weight:500!important}

/* Time left is labelled ("נותרו"), so a countdown never reads as a time of day. */
.sc-left,.card-left{margin-inline-start:auto;display:inline-flex;align-items:baseline;gap:4px;font-size:var(--fs-s);color:var(--muted);white-space:nowrap}
.sc-left .timer,.card-left .timer{margin:0!important}
.tl{font-size:var(--fs-s);color:var(--muted)}
/* The scene's card is a schematic (navy tint, no white product card), so its numbers read as an illustration. */
.sv-card{background:rgba(255,255,255,.1)!important}
.sv-pic{background:rgba(255,255,255,.06)!important}
.sv-card .sv-price{color:#fff}.sv-card .sv-timer{color:var(--navy-ink)}
.st-bid{background:rgba(255,255,255,.1)!important}.st-bid .sv-price{color:#fff}.st-bid .sv-timer{color:var(--navy-ink)}
/* The frosted header over the navy bands: closer to white, so it does not turn blue-grey. */
body>header{background:rgba(255,255,255,.92)!important}

/* Review round. */
/* The ending-soon emphasis on the stage's countdown (tick() adds .red under 10 minutes). */
.sc-left .timer.red{color:var(--navy);font-weight:700}
/* The scene's travelling card: a solid tint, not translucent white. */
.sv-card{background:#234a85!important}.sv-pic{background:#2b5592!important}
/* Recently sold: the counting copy sits over the real price, which stays in the DOM. */
.sold-price{font-size:var(--fs-b)!important}
.sold-price b.counting{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sold-price .count-up{font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums}
.sold-band .sold-price .count-up{font-size:var(--fs-h);letter-spacing:-.02em}
/* Category tiles: the scrim ends at about 45% height; a missing photo shows the silhouette on a light navy tint. */
.bento-tile:not(.no-photo):after{background:linear-gradient(to top,rgba(5,16,36,.74),rgba(5,16,36,0) 45%)!important} /* taste-skill-ignore: neutral scrim for legibility over a photo */
.bento-tile.no-photo{background:#e6ebf3!important}
/* No stage (too few photos): the centred hero with its product picture. */
.home-hero:not(.has-stage) .hero-copy{display:flex;flex-direction:column;align-items:center}
/* Phones: headline, search and the primary action first, then the deck starts inside the first screen;
   the three "why" points and the counts follow the deck. */
@media(max-width:620px){
 .home-hero.has-stage.band{padding:20px 0 36px!important}
 .home-hero.has-stage .hero-in{display:flex!important;flex-direction:column;align-items:stretch}
 .home-hero.has-stage .hero-copy{display:contents}
 .home-hero.has-stage h1{margin-bottom:12px!important}
 .home-hero.has-stage .hero-sub{margin:0 0 16px!important;font-size:var(--fs-b)!important}
 .home-hero.has-stage .hero-ctas{margin-top:14px!important}
 .home-hero.has-stage .stage{order:5;margin-top:22px}
 .home-hero.has-stage .why-line{order:6;margin-top:18px!important}
 .home-hero.has-stage .hero-activity{order:7;margin-top:12px!important}
 .stage{border-radius:0}
}

@media(max-width:620px){.how3.how-scene.band{padding:64px 0!important}}