/* =========================================================
   CK Digital 360, עמוד Shopify (shopify.html).
   נטען אחרי theme.css ו-home2.css. משתמש ברכיבי hx- של דף הבית ומוסיף רק מה שחסר, עם קידומת sh-.
   כלל: אין צבע קשיח. כל ערך דרך משתנה עם ערך גיבוי. אריח שמחזיק צילום מסך הוא אי כהה (on-dark / --media).
   מובייל קודם: הבסיס נכתב לרוחב 390, ומעליו שתי מדרגות (760, 1060).
   ========================================================= */

/* ---------- משותף ---------- */
.sh-k{font-size:13px;font-weight:600;color:var(--pink-ink,#F0508F);font-feature-settings:"tnum" 1;letter-spacing:.02em}
.sh-cap{font-size:14.5px;line-height:1.5;color:var(--grey,#86868b);max-width:60ch;text-wrap:pretty}
/* התג הוא אי כהה (on-dark ב-HTML), כי הלוגו של Shopify יושב טוב רק על רקע כהה */
.sh-badge{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 9px;border-radius:999px;background:var(--bg-2,#0b0b0c);color:var(--text,#f5f5f7);box-shadow:inset 0 0 0 1px var(--hair-2,rgba(245,245,247,.2));font-size:14px;font-weight:600;letter-spacing:-.005em;line-height:1.3;white-space:nowrap}
.sh-badge img{display:block;height:24px;width:auto}
.sh-tag{position:absolute;z-index:3;inset-block-start:-13px;inset-inline-start:14px;padding:5px 12px;border-radius:999px;background:var(--text,#f5f5f7);color:var(--bg,#000);font-size:12.5px;font-weight:600;line-height:1.3;white-space:nowrap;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.sh-win{display:block}
.sh-win .hx-win__view{background:var(--tile-2,#161617)}

/* מסגרת טלפון: מסך 600x1298, מסגרת דקה, אי כהה */
.sh-phone{display:block;padding:5px;border-radius:26px;background:var(--tile,#1d1d1f);box-shadow:0 0 0 1px var(--hair-2,rgba(245,245,247,.2)),0 30px 60px -24px rgba(0,0,0,.85)}
.sh-phone__scr{position:relative;display:block;aspect-ratio:600/1298;border-radius:21px;overflow:hidden;background:var(--media,#0b0b0c)}
.sh-phone__scr::before{content:"";position:absolute;z-index:1;inset-block-start:7px;inset-inline-start:50%;translate:-50% 0;width:34%;height:9px;border-radius:999px;background:var(--tile,#1d1d1f)}
.sh-phone__scr img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.sh-phone--s{padding:4px;border-radius:18px}
.sh-phone--s .sh-phone__scr{border-radius:14px}
.sh-phone--s .sh-phone__scr::before{height:6px;inset-block-start:5px}

/* מסגרת מחשב נייד: מסך 16/10 ובסיס דק */
.sh-lap{display:block}
.sh-lap__scr{display:block;padding:8px 8px 0;border-radius:14px 14px 4px 4px;background:var(--tile,#1d1d1f);box-shadow:0 0 0 1px var(--hair-2,rgba(245,245,247,.2)),0 30px 60px -24px rgba(0,0,0,.85)}
.sh-lap__scr video{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% 0;border-radius:7px 7px 0 0;background:var(--media,#0b0b0c)}
.sh-phone__scr video{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.sh-lap__scr img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% 0;border-radius:7px 7px 0 0;background:var(--media,#0b0b0c)}
.sh-lap__base{display:block;height:12px;margin-inline:-3%;border-radius:0 0 12px 12px;background:var(--tile-3,#2a2a2c);box-shadow:0 0 0 1px var(--hair,rgba(245,245,247,.12))}
.sh-lap__base::before{content:"";display:block;width:16%;height:4px;margin-inline:auto;border-radius:0 0 6px 6px;background:var(--tile-2,#161617)}

/* ---------- 1. ראש העמוד ---------- */
/* ההירו של העמוד עומד בפני עצמו (לא יורש מ-.hx-hero של דף הבית): רשת של קופי ובמה, במובייל הכותרת ואז המכשירים */
.sh-hero{position:relative;overflow:clip;background:var(--bg,#000);padding-block:calc(74px + 16px) 0}
.sh-hero__grid{display:grid;gap:18px}
.sh-hero__copy{display:grid;gap:20px;justify-items:start}
.sh-hero .hx-lead{color:var(--text,#f5f5f7);max-width:52ch}
.sh-hero .hx-lead strong{font-weight:700}
.sh-hero .crumbs{margin-block-end:0}
.sh-h1{font-size:clamp(36px,9.6vw,92px)}
.sh-stage{position:relative;width:100%;aspect-ratio:1/1;overflow:visible}
.sh-dev{position:absolute;display:block;transition:transform .6s var(--ease,ease)}
.sh-dev:hover{transform:translateY(-5px)}
.sh-dev--lap{inset-block-start:17%;inset-inline-end:-3%;width:88%;z-index:1}
.sh-dev--ph{inset-block-end:-3%;inset-inline-start:-3%;width:34%;z-index:2}
.sh-dev--ph .sh-tag{inset-inline-start:auto;inset-inline-end:10px}

/* ---------- 2. מה אני עושה ב-Shopify ---------- */
.sh-do__grid{display:grid;gap:34px}
.sh-do__stage{order:-1}
.sh-do__stage .sh-cap{margin-block-start:14px}
.sh-do__list{list-style:none;margin:0;padding:0;border-block-start:1px solid var(--hair,rgba(245,245,247,.12))}
.sh-do__list li{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:12px;row-gap:6px;padding-block:20px;border-block-end:1px solid var(--hair,rgba(245,245,247,.12))}
.sh-do__list .sh-k{padding-block-start:8px}
.sh-do__list h3{font-size:clamp(22px,2.2vw,30px);font-weight:600;letter-spacing:-.025em;line-height:1.15}
.sh-do__list p{grid-column:2;font-size:16px;line-height:1.5;color:var(--text-2,#a1a1a6);max-width:46ch;text-wrap:pretty}

/* ---------- 3. חנויות שבניתי ---------- */
.sh-stores__grid{list-style:none;margin:0;padding:0;display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-inline:calc(-1*var(--gutter,18px));padding-inline:var(--gutter,18px);scroll-padding-inline:var(--gutter,18px);padding-block:2px 30px}
.sh-stores__grid::-webkit-scrollbar{display:none}
.sh-store{flex:none;width:82vw;max-width:560px;scroll-snap-align:start}
.sh-store>a{position:relative;display:block}
.sh-store .hx-win{transition:transform .6s var(--ease,ease),box-shadow .6s var(--ease,ease)}
.sh-store>a:hover .hx-win{transform:translateY(-6px);box-shadow:0 0 0 1px var(--hair-2,rgba(245,245,247,.2)),var(--shadow,0 40px 90px -40px rgba(0,0,0,.9))}
.sh-store .hx-win{position:relative}
.sh-store__ph{position:absolute;z-index:2;inset-block-end:-9%;inset-inline-end:16px;width:27%;max-width:150px;display:block;filter:drop-shadow(0 18px 30px rgba(0,0,0,.45));transition:transform .8s var(--ease,ease)}
.sh-store>a:hover .sh-store__ph{transform:translateY(-10px)}
.sh-store .hx-site__cap{padding-block-start:16px;padding-inline-end:52px}
.sh-store .hx-site__cap em{line-height:1.4}
.sh-store .hx-site__cap i{inset-block-start:16px}
.sh-store>a:hover .hx-site__cap i{background:var(--text,#f5f5f7);color:var(--bg,#000)}
.sh-stores .hx-more{margin-block-start:10px}

/* ---------- 4. פיתוח מותאם אישית ---------- */
.sh-custom__grid{display:grid;gap:28px}
.sh-custom__list{margin:0;display:grid;border-block-start:1px solid var(--hair,rgba(245,245,247,.12))}
.sh-custom__list>div{display:grid;gap:8px;padding-block:22px;border-block-end:1px solid var(--hair,rgba(245,245,247,.12))}
.sh-custom__list dt{display:flex;align-items:baseline;gap:12px;font-size:clamp(21px,2vw,28px);font-weight:600;letter-spacing:-.025em;line-height:1.15}
.sh-custom__list dd{margin:0;font-size:16px;line-height:1.5;color:var(--text-2,#a1a1a6);max-width:48ch;text-wrap:pretty;padding-inline-start:calc(12px + 2.2ch)}
.sh-proof{margin:0;display:grid;gap:14px}
.sh-proof__cap{font-size:15px;font-weight:600;color:var(--grey,#86868b)}
.sh-rev{width:auto;padding:24px;background:var(--tile,#1d1d1f)}
.sh-rev blockquote{font-size:16.5px;color:var(--text-2,#a1a1a6)}
.sh-rev mark{background:rgba(var(--fg-rgb,245,245,247),.1);color:var(--text,#f5f5f7);border-radius:6px;padding:1px 5px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.sh-rev__src{font-size:13.5px;color:var(--grey,#86868b)}

/* ---------- 5. תוצאות ---------- */
.sh-res__tile{display:grid;gap:22px;padding:22px 18px 18px;border-radius:var(--r-l,28px);background:var(--tile,#1d1d1f)}
.sh-kpi{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:16px 14px}
.sh-kpi>div{display:grid;gap:3px;align-content:start}
.sh-kpi dd{margin:0;font-size:clamp(26px,3vw,40px);font-weight:700;letter-spacing:-.04em;line-height:1;text-align:end}
.sh-kpi dt{font-size:13.5px;color:var(--grey,#86868b);line-height:1.3}
.sh-kpi__main{grid-column:1/-1;padding-block-end:6px;border-block-end:1px solid var(--hair,rgba(245,245,247,.12))}
.sh-kpi__main dd{font-size:clamp(44px,5.6vw,84px);letter-spacing:-.045em}
.sh-kpi__main dt{font-size:15px;color:var(--text-2,#a1a1a6)}
.sh-dash{margin:0;display:grid;gap:12px}
.sh-dash__win{display:block;border-radius:14px}
.sh-dash__scroll{display:block;direction:ltr;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--tile-3,#2a2a2c) transparent;background:var(--tile-2,#161617);cursor:grab}
.sh-dash__scroll.is-drag{cursor:grabbing}
.sh-dash__scroll img{display:block;width:100%;min-width:920px;height:auto}
.sh-dash__hint{color:var(--text-2,#a1a1a6)}
.sh-res .hx-more{gap:14px 26px}

/* ---------- 6. איך עובדים ---------- */
.sh-how .hx-me__say>.hx-eyebrow{margin-block-end:-6px}
.sh-how .hx-h2{max-width:14ch}

/* ---------- 7. שאלות ---------- */
.sh-faq .faq__side h2{font-size:clamp(32px,3.2vw,48px);font-weight:700;letter-spacing:-.028em;line-height:1.06}
.sh-faq .faq__me a{color:var(--pink-ink,#F0508F)}

/* ---------- 8. מדברים ---------- */
.sh-talk__head{margin-block-end:8px}
.sh-talk .hx-h2{font-size:clamp(32px,4.2vw,60px)}
.sh-talk .f{margin-block-start:10px}

/* ---------- טאבלט ומעלה ---------- */
@media (min-width:761px){
  .sh-h1{font-size:clamp(42px,5.4vw,88px)}
  .sh-do__grid{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(30px,5vw,80px);align-items:start}
  .sh-do__stage{order:0;position:sticky;inset-block-start:96px}
  .sh-do__list li{grid-template-columns:44px minmax(0,1fr);column-gap:16px;padding-block:24px}
  .sh-stores__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,3.4vw,52px) clamp(16px,2vw,28px);overflow:visible;margin-inline:0;padding:0}
  .sh-store{width:auto;max-width:none}
  .sh-store__ph{width:26%;max-width:160px;inset-inline-end:22px}
  .sh-custom__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:start}
  .sh-rev{padding:30px}
  .sh-res__tile{padding:clamp(26px,3vw,44px);gap:30px}
  .sh-kpi{grid-template-columns:minmax(0,2.2fr) repeat(4,minmax(0,1fr));align-items:end;gap:18px}
  .sh-kpi__main{grid-column:auto;padding-block-end:0;border-block-end:0;padding-inline-end:22px;border-inline-end:1px solid var(--hair,rgba(245,245,247,.12))}
  .sh-dash__scroll img{min-width:0}
  .sh-dash__hint{display:none}
}
@media (min-width:761px){
  .sh-hero{padding-block-start:calc(74px + clamp(24px,5vh,56px))}
  .sh-hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(30px,5vw,80px);align-items:center;min-height:calc(min(100svh,820px) - 74px - clamp(24px,5vh,56px))}
  .sh-stage{aspect-ratio:1/.92}
}
@media (min-width:1061px){
  .sh-dev--lap{width:86%;inset-inline-end:-6%;inset-block-start:18%}
  .sh-dev--ph{width:31%;inset-inline-start:-5%;inset-block-end:-2%}
  .sh-do__list li{padding-block:clamp(22px,2.6vh,30px)}
}
/* מובייל: הכותרת קודם, אחריה המכשירים, ואז הפתיח והכפתורים. הקופי נפתח לרשת של ההירו כדי לסדר מחדש */
@media (max-width:760px){
  .sh-hero__grid{gap:18px}
  .sh-hero__copy{display:contents}
  .sh-hero .crumbs{order:0;justify-self:start;margin-block-end:0}
  .sh-hero .sh-badge{order:1;justify-self:start}
  .sh-hero .sh-h1{order:2}
  .sh-stage{order:3;width:100%;aspect-ratio:1/1;height:auto;margin-block:10px 24px}
  .sh-dev--lap{inset-block-start:10%;inset-inline-end:-2%;width:90%}
  .sh-dev--ph{inset-block-end:-4%;inset-inline-start:-2%;width:35%}
  .sh-hero .hx-lead{order:4}
  .sh-hero .hx-hero__ctas{order:5;margin-block-start:0}
  .sh-hero .hx-hero__proof{order:6;margin-block-start:0}
  .sh-hero .hx-hero__proof li+li::before{display:none}
  .sh-store .hx-win{--vh:clamp(280px,56vh,380px)}
  .sh-dash__win{border-radius:12px}
  .sh-how .hx-me__steps span{text-align:end}
}
@media (hover:none){
  .sh-dev:hover,.sh-store>a:hover .hx-win,.sh-store>a:hover .sh-store__ph{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .sh-dev,.sh-store .hx-win,.sh-store__ph{transition:none}
}