/* Шаблон кейсів інтернет-магазинів (template-parts/shop-case/main.php).
   Заголовки, текст і списки беруть стилі сайту (template-title, default_goals-desc, default_tasks-item);
   нижче тільки hero, розкладка секцій і рамки для знімків. Кольори кейса: змінні на .shop-case. */

.shop-case {
    --sc-ink: #1b1b2f;
    --sc-accent: #d41a45;
    --sc-grad: linear-gradient(124.79deg, #3b0944, #b11237); /* градієнт hero головної сайту; видима частина лівіша до малинового */
    --sc-grey: #f6f6f6;
    --sc-pill: #f2df7a; /* акцент клієнта: жовтий BioElite на фірмовому градієнті */
    --sc-green: #3c8d5a; /* зелений BioElite для рамок */
    --sc-sun: #f2df7a;
    --sc-plum: #3b0944;
    color: var(--sc-ink);
    overflow: hidden;
}
.shop-case * { box-sizing: border-box; }
.shop-case img { display: block; max-width: 100%; height: auto; }

/* ---- Hero ---- */
.sc-hero {
    padding: 150px 0 100px;
    color: #fff;
    background: var(--sc-grad);
    background-size: 200% 200%;
    background-position: 78% 40%;
}
.sc-hero__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; align-items: center; }
.sc-hero__title {
    margin: 0 0 28px;
    max-width: 560px;
    font-size: 50px;
    line-height: 1.1;
    font-weight: 900;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 3px 2px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.1);
}
.sc-hero__descr {
    max-width: 380px;
    padding-left: 16px;
    border-left: 3px solid var(--sc-pill);
    color: rgba(255, 255, 255, 0.92);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
}
.sc-hero__site { display: flex; align-items: center; gap: 8px; width: fit-content; margin-top: 28px; padding-bottom: 3px; border-bottom: 1px solid rgba(255, 255, 255, 0.5); font-size: 18px; font-weight: 600; color: #fff; text-decoration: none; }
.sc-hero__site:hover { color: #fff; border-bottom-color: #fff; }

/* Збірка зі знімків реального інтерфейсу */
.sc-hero__stage { position: relative; aspect-ratio: 600 / 480; width: 86%; }
.sc-win { position: absolute; top: 0; right: 0; width: 92%; border-radius: 14px; background: #fff; overflow: hidden; box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.45); }
.sc-win__bar { display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 12px; background: #ececf3; }
.sc-win__bar i { width: 8px; height: 8px; border-radius: 50%; background: #c9c9d6; }
.sc-float { position: absolute; border-radius: 14px; background: #fff; overflow: hidden; box-shadow: 0 24px 50px -14px rgba(0, 0, 0, 0.45); }
.sc-float--filters { left: 0; bottom: 0; width: 29%; }
.sc-float--buy { right: -6%; bottom: 17%; width: 66%; }

/* Бігль із сайту клієнта, стоїть на нижньому краї hero */
.sc-hero { position: relative; overflow: hidden; }
.sc-hero__dog { position: absolute; right: max(12px, calc((100% - 1300px) / 2 - 24px)); bottom: 0; width: 210px; height: auto; z-index: 3; pointer-events: none; }

/* ---- Секції ---- */
.sc-sec { padding: 100px 0; background: #fff; }
.sc-sec--grey { background: var(--sc-grey); }
.sc-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.sc-sec.is-reverse .sc-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.sc-sec.is-reverse .sc-copy { order: 2; }
.sc-copy .template-title { margin-bottom: 32px; }
.sc-copy__text { max-width: none; margin: 0; }
.sc-copy__text p { margin: 0 0 16px; }
.sc-copy__text p:last-child { margin-bottom: 0; }
.sc-points { margin-top: 28px; }
.sc-points .default_tasks-item { padding-left: 26px; font-size: 18px; line-height: 27px; }
.sc-points .default_tasks-item::after { background: var(--sc-accent); top: 9px; width: 9px; height: 9px; }

.sc-visual { position: relative; display: flex; gap: 20px; align-items: flex-start; }
.sc-card { border-radius: 20px; background: #fff; overflow: hidden; box-shadow: 0 10px 40px rgba(27, 27, 47, 0.12); }

/* каталог: фільтри + картки */
.sc-card--filters { flex: 0 0 31%; }
.sc-card--cards { flex: 1 1 auto; margin-top: 40px; }
/* картка товару: монітор, ноутбук і смартфон одним знімком */
.sc-visual--product { display: block; }
.sc-visual--product img { width: 100%; filter: drop-shadow(0 12px 16px rgba(27, 27, 47, 0.2)); } /* тінь по контуру пристроїв, а не запечена в картинці (її обрізало краєм) */
/* замовлення: сторінка + кошик поверх */
.sc-visual--checkout { display: block; padding-bottom: 56px; }
.sc-card--checkout { width: 88%; }
.sc-card--cart { position: absolute; right: 0; bottom: 0; width: 66%; box-shadow: 0 20px 60px rgba(27, 27, 47, 0.28); }

.sc-checkout-phones { display: none; }

/* ---- Лояльність: фірмовий градієнт сайту ---- */
.sc-sec--accent { background: var(--sc-grad); background-size: 200% 200%; background-position: 78% 40%; color: #fff; }
.sc-sec--accent .template-title h2 { color: #fff; }
.sc-sec--accent .default_goals-desc { color: rgba(255, 255, 255, 0.9); }
.sc-tiers { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sc-tiers li { display: flex; flex-direction: column; gap: 8px; padding: 20px 18px; border-radius: 16px; background: #fff; color: var(--sc-ink); }
.sc-tiers strong { font-size: 36px; line-height: 1; font-weight: 900; color: var(--sc-accent); }
.sc-tiers span { font-size: 14px; line-height: 1.4; color: #55556a; }
.sc-visual--loyalty { display: block; }
.sc-card--loyalty { box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.5); }

/* ---- Мобільна версія ---- */
.sc-sec--mobile .sc-split { grid-template-columns: minmax(0, 1fr); gap: 0; }
.sc-sec--mobile .sc-copy__text { max-width: 760px; }
.sc-visual--mobile { display: none; }
.sc-phones { display: flex; gap: 6px; margin-top: 44px; padding: 8px 4px 24px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.sc-phone { flex: 0 0 auto; width: 232px; scroll-snap-align: start; }
.sc-phone img { filter: drop-shadow(0 18px 22px rgba(27, 27, 47, 0.25)); }
@media (min-width: 1200px) {
    .sc-phones { justify-content: space-between; overflow: visible; }
    .sc-phone { width: 19%; }
}

/* ---- Технології ---- */
.sc-stack { display: grid; grid-template-columns: 1fr 1.4fr; gap: 20px; width: 100%; }
.sc-stack--single { grid-template-columns: 1fr; }
.sc-stack__col { padding: 26px; border-radius: 20px; background: #fff; box-shadow: 0 10px 40px rgba(27, 27, 47, 0.08); }
.sc-stack__label { margin-bottom: 16px; font-size: 18px; font-weight: 800; color: var(--sc-ink); }
.sc-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.sc-chips--icons li { display: inline-flex; align-items: center; gap: 9px; padding: 6px 16px 6px 6px; }
.sc-chip-ic { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(27, 27, 47, 0.12); overflow: hidden; }
.sc-chip-ic img { width: 22px; height: 22px; object-fit: contain; }
.sc-chips li { padding: 10px 16px 9px; border-radius: 999px; background: var(--sc-grey); font-size: 14px; line-height: 1; font-weight: 600; color: var(--sc-ink); }

/* ---- Адаптив ---- */
@media (max-width: 1100px) {
    .sc-split, .sc-sec.is-reverse .sc-split { gap: 40px; }
}
@media (max-width: 991px) {
    .sc-hero { padding: 110px 0 64px; }
    .sc-hero__grid, .sc-split, .sc-sec.is-reverse .sc-split { grid-template-columns: minmax(0, 1fr); }
    .sc-hero__grid { gap: 40px; }
    .sc-sec { padding: 64px 0; }
    .sc-sec.is-reverse .sc-copy { order: 0; }
    .sc-stack { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .sc-hero__title { font-size: 34px; }
    .sc-hero__descr { font-size: 17px; }
    /* На телефоні знімки йдуть стовпчиком і на всю ширину, щоб текст на них читався. */
    .sc-visual--catalog { flex-direction: column; align-items: stretch; gap: 16px; }
    .sc-visual--catalog .sc-card { flex: none; width: 100%; margin-top: 0; }
    .sc-card--cards { order: -1; }
    .sc-card--filters { width: 72%; }
    .sc-hero__dog { width: 130px; }
    .sc-hero__stage { width: 100%; }
    .sc-card--filters img { max-height: 330px; object-fit: cover; object-position: top; }
    /* Замовлення на телефоні: замість десктопних знімків два мобільні екрани (кошик і оформлення). */
    .sc-card--checkout, .sc-card--cart { display: none; }
    .sc-visual--checkout { padding-bottom: 0; }
    .sc-checkout-phones { display: flex; gap: 10px; }
    .sc-checkout-phones img { width: calc(50% - 5px); height: auto; filter: drop-shadow(0 10px 14px rgba(27, 27, 47, 0.22)); }
    .sc-card { border-radius: 14px; }
    .sc-tiers { grid-template-columns: 1fr; }
    .sc-tiers li { flex-direction: row; align-items: center; gap: 14px; }
    .sc-tiers strong { flex: 0 0 76px; font-size: 28px; }
    .sc-phone { width: 190px; }
}

/* Рамки знімків: різні кольори фірмової гами, 3-4 px. */
.sc-card, .sc-win, .sc-float { border: 4px solid var(--sc-frame, #fff); }
.sc-card--filters { --sc-frame: var(--sc-accent); }
.sc-card--cards { --sc-frame: var(--sc-plum); }
.sc-card--checkout { --sc-frame: var(--sc-plum); }
.sc-card--cart { --sc-frame: var(--sc-accent); }
.sc-card--loyalty { --sc-frame: var(--sc-sun); }
.sc-win { --sc-frame: var(--sc-sun); }
.sc-float--filters { --sc-frame: #ff9f1c; }
.sc-float--buy { --sc-frame: #2b0a3d; } /* темна слива: не зливається ні з зеленим баннером верхнього екрана, ні з білим */
.sc-win__bar { margin: 0; }
@media (max-width: 767px) {
    .sc-card, .sc-win, .sc-float { border-width: 3px; }
}

/* Хвіст сторінки кейса (форма й «Ще проєкти») у спільній сірій гамі. */
.more-pojects { background: #f6f6f6; }
.discuss-project--project { background: #fff; }

/* Високу панель фільтрів обрізаємо по висоті (показуємо верх), щоб вона не ламала композицію. */
.sc-float--filters img { max-height: 300px; width: 100%; object-fit: cover; object-position: top; }
.sc-card--filters img { max-height: 520px; width: 100%; object-fit: cover; object-position: top; }