/* =====================================================================
   shop-ui.css - עמוד החנות (בסגנון דף הבית): להיטים, חבילות מטבעות, קטלוג וחדר מדידה
   ===================================================================== */
.sk .shop-body { position: relative; z-index: 3; margin-top: -48px; padding-bottom: 90px; }
.shop-block { margin-bottom: 52px; }
.shop-block__head { text-align: center; margin-bottom: 22px; }
.shop-block__head h2 { font: 400 clamp(1.7rem, 4vw, 2.3rem)/1.2 var(--font-display); color: var(--sky-900); margin: 0 0 4px; }
.shop-block__head p { margin: 0; color: var(--ink-soft); font-weight: 500; }

/* תגיות מחיר */
.tag { display: inline-flex; align-items: center; gap: 6px; font: 700 .9rem/1 var(--font-body); padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.tag--coin { background: #fff4cf; color: #7a4300; border: 2px solid var(--yellow-400); }
.tag--coin i { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3a8, var(--yellow-400) 55%, #d98a00); }
.tag--free { background: #e3fff0; color: #0b6b36; border: 2px solid var(--green-500); }
.tag--premium { background: #efe8ff; color: var(--violet-700); border: 2px solid var(--violet-300); }

/* להיטים */
.shop-featured { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.feat {
    display: flex; flex-direction: column; text-align: start; padding: 0; cursor: pointer; font: inherit; color: var(--ink);
    background: #fff; border: 4px solid #fff; border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: 0 8px 0 var(--sky-300), 0 22px 36px rgba(21, 60, 130, .15);
    transition: transform .25s cubic-bezier(.2, 1.4, .4, 1), box-shadow .25s;
}
.feat:hover { transform: translateY(-8px) rotate(-.6deg); box-shadow: 0 14px 0 var(--sky-300), 0 30px 40px rgba(21, 60, 130, .2); }
.feat:nth-child(2) { box-shadow: 0 8px 0 var(--violet-300), 0 22px 36px rgba(21, 60, 130, .15); }
.feat:nth-child(2):hover { box-shadow: 0 14px 0 var(--violet-300), 0 30px 40px rgba(21, 60, 130, .2); }
.feat:nth-child(3) { box-shadow: 0 8px 0 var(--orange-300), 0 22px 36px rgba(21, 60, 130, .15); }
.feat:nth-child(3):hover { box-shadow: 0 14px 0 var(--orange-300), 0 30px 40px rgba(21, 60, 130, .2); }
.feat__stage {
    position: relative; height: 240px; display: grid; place-items: center; overflow: hidden;
    background: radial-gradient(circle at 50% 35%, #fff, transparent 60%), linear-gradient(180deg, #8fd6ff, #d6f3ff);
}
.feat__stage img { max-height: 200px; max-width: 80%; object-fit: contain; filter: drop-shadow(0 14px 12px rgba(11, 61, 145, .3)); animation: floaty 4.5s ease-in-out infinite; transition: transform .3s; }
.feat:hover .feat__stage img { transform: scale(1.1) rotate(-4deg); }
.feat__badge {
    position: absolute; top: 14px; inset-inline-start: 14px; z-index: 2; font: 400 .95rem var(--font-display); color: #fff;
    padding: 5px 14px; border-radius: 999px; background: linear-gradient(180deg, #a98aff, var(--violet-500)); box-shadow: 0 3px 0 var(--violet-700);
}
.feat__body { display: flex; flex-direction: column; gap: 6px; padding: 18px 22px 22px; }
.feat__name { font: 400 1.4rem/1.25 var(--font-display); color: var(--sky-900); }
.feat__desc { color: var(--ink-soft); font-weight: 500; min-height: 1.5em; }
.feat__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.feat__try { font: 400 .95rem var(--font-display); color: #fff; padding: 7px 16px; border-radius: 12px; background: linear-gradient(180deg, #6cc4ff, var(--sky-500)); box-shadow: 0 4px 0 var(--sky-700); }

/* חבילות מטבעות */
.coin-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 340px)); gap: 26px; justify-content: center; }
.pack {
    position: relative; text-align: center; padding: 28px 22px 24px; border-radius: var(--radius-lg); background: #fff;
    border: 4px solid var(--sky-100); box-shadow: 0 8px 0 var(--sky-100), 0 22px 36px rgba(21, 60, 130, .12);
    transition: transform .25s cubic-bezier(.2, 1.4, .4, 1);
}
.pack:hover { transform: translateY(-6px); }
.pack--best { border-color: var(--orange-300); background: linear-gradient(180deg, #fffaf0, #fff); box-shadow: 0 8px 0 var(--orange-300), 0 22px 36px rgba(21, 60, 130, .15); }
.pack__ribbon {
    position: absolute; top: -14px; inset-inline-start: 50%; translate: 50% 0; transform: rotate(-3deg);
    font: 400 1rem var(--font-display); color: #5a2a00; padding: 6px 18px; border-radius: 999px;
    background: linear-gradient(180deg, var(--orange-300), var(--orange-500)); box-shadow: 0 4px 0 var(--orange-600);
}
html[dir="rtl"] .pack__ribbon { translate: -50% 0; inset-inline-start: auto; left: 50%; }
.pack h3 { font: 400 1.6rem var(--font-display); color: var(--sky-900); margin: 10px 0 2px; }
.pack__desc { margin: 0 0 10px; color: var(--ink-soft); font-weight: 500; }
.pack__price { font: 400 2.2rem var(--font-display); color: var(--orange-600); margin: 4px 0 12px; }
.pack__soon { display: inline-block; font: 700 .95rem var(--font-body); color: var(--ink-soft); background: var(--sky-100); padding: 8px 20px; border-radius: 999px; }

.coin-art { position: relative; width: 150px; height: 110px; margin: 0 auto; }
.coin-art i {
    position: absolute; width: 68px; height: 68px; border-radius: 50%; left: 50%; bottom: 0;
    background: radial-gradient(circle at 35% 30%, #fff6b8, var(--yellow-400) 50%, #e09a00 100%);
    border: 4px solid #d98a00; box-shadow: 0 5px 0 #b87000, inset 0 -6px 0 rgba(217, 138, 0, .35);
    animation: coinBob 3s ease-in-out infinite;
}
.coin-art i::after { content: '\2605'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.7rem; color: #d98a00; }
.coin-art i:nth-child(1) { translate: -120% 0; animation-delay: -.4s; }
.coin-art i:nth-child(2) { translate: -50% -26px; z-index: 2; animation-delay: -1.2s; }
.coin-art i:nth-child(3) { translate: 20% 0; animation-delay: -2s; }
.coin-art i:nth-child(4) { translate: -85% -52px; z-index: 3; animation-delay: -.8s; width: 58px; height: 58px; }
.coin-art i:nth-child(5) { translate: -15% -52px; z-index: 3; animation-delay: -1.6s; width: 58px; height: 58px; }
.coin-art--big { height: 140px; }
@keyframes coinBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* קטלוג */
.shop-filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 24px; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 20px; }
.item {
    display: flex; flex-direction: column; gap: 8px; padding: 12px; cursor: pointer; font: inherit; color: var(--ink); text-align: start;
    background: #fff; border: 3px solid var(--sky-100); border-radius: var(--radius-md); box-shadow: 0 6px 0 var(--sky-100);
    transition: transform .2s cubic-bezier(.2, 1.5, .4, 1), border-color .2s, box-shadow .2s;
    animation: itemIn .5s cubic-bezier(.2, .9, .3, 1.1) both; animation-delay: calc(var(--i, 0) * 40ms);
}
@keyframes itemIn { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
.item:hover { transform: translateY(-6px); border-color: var(--sky-300); box-shadow: 0 11px 0 var(--sky-300); }
.item__stage { height: 150px; display: grid; place-items: center; border-radius: 16px; background: linear-gradient(180deg, var(--sky-100), #fff); overflow: hidden; }
.item__stage img { max-width: 82%; max-height: 82%; object-fit: contain; transition: transform .25s cubic-bezier(.2, 1.6, .4, 1); }
.item:hover .item__stage img { transform: scale(1.12) rotate(-3deg); }
.item__name { font: 400 1.1rem/1.25 var(--font-display); color: var(--sky-900); }
.item__foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; }
.item__cat { font-size: .82rem; font-weight: 700; color: var(--ink-soft); background: var(--sky-50); border: 2px solid var(--sky-100); padding: 3px 10px; border-radius: 999px; }
.item--skeleton { height: 240px; cursor: default; background: linear-gradient(90deg, var(--sky-100), #fff, var(--sky-100)); background-size: 200% 100%; animation: blogShimmer 1.3s linear infinite; }
.shop-empty { grid-column: 1 / -1; text-align: center; color: var(--ink-soft); font-weight: 600; padding: 30px; }

/* איך זה עובד */
.shop-how {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; text-align: center;
    background: linear-gradient(160deg, var(--violet-500), var(--sky-700)); border-radius: var(--radius-lg); padding: 34px 28px;
    box-shadow: 0 8px 0 var(--violet-700), 0 24px 40px rgba(21, 60, 130, .25); color: #fff;
}
.how-step b { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 8px; border-radius: 50%; font: 400 1.4rem var(--font-display); color: var(--sky-900); background: #fff; box-shadow: 0 4px 0 rgba(11, 61, 145, .35); }
.how-step h3 { font: 400 1.3rem var(--font-display); margin: 0 0 4px; }
.how-step p { margin: 0; opacity: .92; }
.shop-how .btn { grid-column: 1 / -1; justify-self: center; margin-top: 8px; }

/* חדר מדידה */
.tryon { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 16px; background: rgba(11, 61, 145, .55); animation: fadeIn .2s; }
.tryon.hidden { display: none; }
.tryon__card {
    position: relative; width: min(100%, 520px); max-height: 94vh; overflow: auto; text-align: center; padding: 20px 22px 22px;
    background: #fff; border-radius: var(--radius-lg); border: 4px solid var(--sky-300);
    box-shadow: 0 10px 0 rgba(21, 101, 216, .35), 0 30px 60px rgba(11, 61, 145, .4); animation: tryonIn .35s cubic-bezier(.2, 1.5, .4, 1);
}
@keyframes tryonIn { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.tryon__close { position: absolute; top: 10px; inset-inline-end: 12px; width: 38px; height: 38px; border: 0; border-radius: 50%; cursor: pointer; font-size: 1.6rem; line-height: 1; color: var(--sky-900); background: var(--sky-100); }
.tryon__close:hover { background: var(--sky-300); }
.tryon__stage { margin: 8px auto 6px; border-radius: 22px; background: radial-gradient(circle at 50% 30%, #fff, transparent 60%), linear-gradient(180deg, #8fd6ff, #e3f5ff); overflow: hidden; }
.tryon__stage canvas { width: 100%; height: auto; display: block; }
.tryon__card h3 { font: 400 1.6rem var(--font-display); color: var(--sky-900); margin: 4px 0; }
.tryon__desc { margin: 0 0 8px; color: var(--ink-soft); font-weight: 500; min-height: 1.4em; }
.tryon__meta { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.tryon__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.tryon__actions .btn { margin-bottom: var(--ledge); }

@media (max-width: 760px) {
    .shop-how { grid-template-columns: 1fr; }
    .feat__stage { height: 200px; }
}
@media (prefers-reduced-motion: reduce) {
    .feat__stage img, .coin-art i, .item { animation: none; }
}
.pack__price span { font: 700 1.5rem var(--font-body); margin-inline-end: 4px; }
.tag--soon { background: var(--sky-100); color: var(--sky-700); border: 2px solid var(--sky-300); }
.shop-featured { grid-template-columns: repeat(auto-fit, minmax(240px, 380px)); justify-content: center; }