@import url('/cases/_shared/shop-base.css');

:root {
  --bg: #0E0F11;
  --surface: #191B1F;
  --ink: #F2F3F5;
  --muted: #8A9099;
  --line: #2A2D33;
  --accent: #FFB020;
  --accent-ink: #111;
  --radius: 16px;
  --radius-sm: 12px;
  --head: 'Russo One', system-ui, sans-serif;
  --body: 'Golos Text', system-ui, sans-serif;
}

h1, h2 { font-weight: 400; letter-spacing: .01em; }
.logo { font-family: var(--head); font-size: 1.45rem; letter-spacing: .06em; display: flex; align-items: center; gap: 4px; }
.logo i { font-style: normal; color: var(--accent); font-size: .85em; }
.count { color: var(--accent-ink); }

/* hero */
.hero { padding: 16px 0 24px; }
.hero-box { position: relative; border-radius: 24px; overflow: hidden; min-height: 420px; display: flex; align-items: flex-end; }
.hero-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-box::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 15, 17, .1) 20%, rgba(14, 15, 17, .92) 78%); }
.hero-copy { position: relative; z-index: 1; padding: 24px 20px; }
.chip { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: .8rem; font-weight: 700; }
.hero h1 { margin-top: 14px; font-size: clamp(2.2rem, 10vw, 4.4rem); line-height: 1.02; }
.hero h1 span { color: var(--accent); }
.lead { margin: 14px 0 22px; color: #C3C7CE; max-width: 44ch; }

/* perks */
.perks { padding: 8px 0 32px; }
.perks-in { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.perks-in div { padding: 16px; border-radius: var(--radius); background: var(--surface); display: grid; gap: 2px; }
.perks-in b { font-family: var(--head); font-weight: 400; font-size: 1.2rem; color: var(--accent); }
.perks-in span { font-size: .82rem; color: var(--muted); }

/* catalog */
.catalog { padding: 24px 0 56px; }
.catalog-head h2 { font-size: clamp(2rem, 8vw, 3rem); }
.p-media { background: #fff; }
.p-badge { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.filters button.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.p-add:hover, .p-add.is-added { color: var(--accent-ink); }

/* subscribe */
.sub { padding: 0 0 64px; }
.sub-in { display: grid; gap: 18px; padding: 26px 20px; border-radius: 24px; background: linear-gradient(135deg, #2A2D33, #191B1F); border: 1px solid var(--line); }
.sub h2 { font-size: clamp(1.6rem, 7vw, 2.4rem); }
.sub p { margin-top: 8px; color: var(--muted); }
.sub-form { display: grid; gap: 10px; }
.sub-form input { width: 100%; padding: 15px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.sub-form input:focus { outline: 2px solid var(--accent); }

@media (min-width: 768px) {
  .hero-box { min-height: 520px; }
  .hero-copy { padding: 48px; max-width: 640px; }
  .hero-box::after { background: linear-gradient(90deg, rgba(14, 15, 17, .92) 25%, rgba(14, 15, 17, .15)); }
  .perks-in { grid-template-columns: repeat(4, 1fr); }
  .sub-in { grid-template-columns: 1fr 1fr; align-items: center; padding: 40px; }
  .sub-form { grid-template-columns: 1fr auto; }
}

/* ===== Сторінка запуску продукту ===== */
.launch { padding: 30px 0 50px; text-align: center; overflow: hidden; background: radial-gradient(ellipse at 50% 60%, rgba(255, 176, 32, .14), transparent 60%); }
.launch .chip { margin: 0 auto; }
.launch-title { margin-top: 18px; font-size: clamp(4rem, 22vw, 13rem); line-height: .85; letter-spacing: .02em; background: linear-gradient(180deg, #fff 30%, #6b7078); -webkit-background-clip: text; background-clip: text; color: transparent; }
.launch-title span { background: linear-gradient(180deg, var(--accent), #b36d00); -webkit-background-clip: text; background-clip: text; }
.launch-sub { margin: 14px auto 0; max-width: 38ch; color: var(--muted); font-size: 1.05rem; }
.launch-stage { position: relative; width: min(420px, 82%); margin: 34px auto 0; }
.launch-stage img { position: relative; z-index: 1; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 1px solid #3a3d44; box-shadow: 0 0 0 10px rgba(255, 176, 32, .06), 0 40px 80px -30px rgba(0, 0, 0, .8); animation: float 6s ease-in-out infinite; }
.glow { position: absolute; inset: -14%; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255, 176, 32, .55), transparent 30%, rgba(255, 176, 32, .35) 55%, transparent 80%, rgba(255, 176, 32, .55)); filter: blur(30px); animation: spin 9s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
@keyframes float { 50% { translate: 0 -10px; } }
.spec { position: absolute; z-index: 2; padding: 7px 12px; border-radius: 999px; background: rgba(25, 27, 31, .85); backdrop-filter: blur(6px); border: 1px solid #34373e; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.s1 { top: 6%; left: -6%; } .s2 { top: 18%; right: -6%; } .s3 { bottom: 20%; left: -8%; } .s4 { bottom: 4%; right: -6%; }
.launch-buy { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 22px; margin-top: 34px; }
.launch-buy p { display: flex; flex-direction: column; text-align: left; }
.launch-buy b { font-family: var(--head); font-weight: 400; font-size: 1.8rem; }
.launch-buy span { font-size: .8rem; color: var(--muted); }
.launch-buy .btn { min-width: 160px; }
.more { color: var(--accent); font-weight: 600; }

.bento-cats { padding: 10px 0 30px; }
.cats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cat { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 170px; padding: 16px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); isolation: isolate; transition: border-color .25s; }
.cat:hover { border-color: var(--accent); }
.cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .55; transition: opacity .3s, scale .5s; }
.cat:hover img { opacity: .8; scale: 1.05; }
.cat::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(transparent 30%, rgba(14, 15, 17, .9)); }
.cat b { font-family: var(--head); font-weight: 400; font-size: 1.3rem; }
.cat span { font-size: .8rem; color: var(--muted); }
.c-audio { grid-column: 1 / -1; min-height: 220px; }
.c-perk, .c-perk2 { justify-content: center; min-height: 120px; }
.c-perk { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.c-perk span { color: rgba(17, 17, 17, .7); }
.c-perk b, .c-perk2 b { font-size: 1.8rem; }
.c-perk2 b { color: var(--accent); }
.c-perk::after, .c-perk2::after { display: none; }

/* темні картки зі світінням */
.p-card { padding: 8px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); transition: border-color .3s, box-shadow .3s; }
.p-card:hover { border-color: rgba(255, 176, 32, .6); box-shadow: 0 0 0 1px rgba(255, 176, 32, .3), 0 20px 50px -20px rgba(255, 176, 32, .35); }
.p-media { border-radius: 16px; aspect-ratio: 1; }
.p-body { padding: 12px 6px 6px; }
.p-name { font-weight: 600; }
.p-price { font-family: var(--head); font-weight: 400; font-size: 1.1rem; }

@media (min-width: 768px) {
  .launch { padding: 50px 0 70px; }
  .launch-stage { width: 440px; }
  .spec { font-size: .82rem; padding: 9px 14px; }
  .s1 { left: -36%; } .s2 { right: -30%; } .s3 { left: -40%; } .s4 { right: -36%; }
  .cats { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; gap: 14px; }
  .c-audio { grid-column: span 2; grid-row: span 2; min-height: 0; }
  .cat { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .glow, .launch-stage img { animation: none; } }