/* =========================================================
   CYBERDOLL — stockists
   (loads after style.css + shop.css)
   ========================================================= */

.page-stock .nav { background: rgba(10, 10, 11, .95); }
.st { padding-top: var(--header-h); background: var(--paper); }

/* ---------- hero + radar ---------- */
.st-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 80px); align-items: center;
  padding: clamp(50px, 7vw, 100px) var(--gutter);
  background: #050a07;
  color: #b8ffc4;
  overflow: hidden;
}
.st-radar {
  position: relative;
  width: min(460px, 86vw); aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  border: 2px solid #3bd44f;
  background: radial-gradient(circle, rgba(59, 212, 79, .12), rgba(59, 212, 79, .02) 70%);
  box-shadow: 0 0 40px rgba(59, 212, 79, .25), inset 0 0 40px rgba(59, 212, 79, .15);
  overflow: hidden;
}
.st-radar__sweep {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(59, 212, 79, .55), rgba(59, 212, 79, 0) 70deg, transparent 360deg);
  animation: sweep 4s linear infinite;
}
@keyframes sweep { to { transform: rotate(360deg); } }
.st-radar__ring { position: absolute; border: 1px solid rgba(59, 212, 79, .35); border-radius: 50%; }
.st-radar__ring--1 { inset: 12%; }
.st-radar__ring--2 { inset: 26%; }
.st-radar__ring--3 { inset: 40%; }
.st-radar__cross::before, .st-radar__cross::after { content: ""; position: absolute; background: rgba(59, 212, 79, .3); }
.st-radar__cross::before { left: 0; right: 0; top: 50%; height: 1px; }
.st-radar__cross::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.st-radar__home { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--hotpink); font-size: 22px; text-shadow: 0 0 10px var(--hotpink); }
.st-blip { position: absolute; transform: translate(-50%, -50%); }
.st-blip i { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--hotpink); box-shadow: 0 0 10px var(--hotpink); opacity: .35; animation: ping 4s linear infinite; animation-delay: var(--delay); }
@keyframes ping { 0%, 4% { opacity: 1; transform: scale(1.8); } 30%, 100% { opacity: .35; transform: scale(1); } }
.st-blip b { position: absolute; left: 14px; top: -4px; font-family: var(--f-pixel); font-weight: 400; font-size: 9px; color: #b8ffc4; white-space: nowrap; }
.st-blip.is-new i { animation: pingNew 1s ease-out 3, ping 4s linear infinite 3s; }
@keyframes pingNew { from { box-shadow: 0 0 0 0 rgba(255, 94, 168, .9); } to { box-shadow: 0 0 0 26px rgba(255, 94, 168, 0); } }

.st-hero .kicker { color: #3bd44f; margin-bottom: 12px; }
.st-title { font-family: var(--f-display); font-weight: 400; font-size: clamp(64px, 10vw, 170px); line-height: .86; color: var(--white); text-shadow: 4px 4px 0 #1e7a2c; }
.st-scan, .st-result { margin-top: 22px; font-family: var(--f-mono); font-size: 15px; max-width: 420px; }
.st-scan span { animation: dotty 1s infinite; }
.st-scan span:nth-child(2) { animation-delay: .2s; }
.st-scan span:nth-child(3) { animation-delay: .4s; }
@keyframes dotty { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.st-result { animation: typeIn .6s steps(20) both; }
@keyframes typeIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.st-result b { color: var(--hotpink); }

/* ---------- request ---------- */
.st-req { max-width: 900px; margin: 0 auto; padding: clamp(60px, 8vw, 100px) var(--gutter); text-align: center; }
.st-req .kicker { color: var(--red); margin-bottom: 8px; }
.st-h2 { font-family: var(--f-script); font-weight: 400; font-size: clamp(70px, 9vw, 130px); line-height: .8; color: var(--hotpink); }
.st-sub { margin: 14px auto 28px; max-width: 420px; font-size: 14px; }
.st-form { display: flex; gap: 10px; max-width: 560px; margin: 0 auto; }
.st-form input { flex: 1; min-width: 0; padding: 14px 16px; font: 15px var(--f-mono); border: 2px solid var(--ink); border-radius: 0; background: var(--white); color: var(--ink); box-shadow: 5px 5px 0 var(--ink); outline: none; }
.st-form input:focus { box-shadow: 5px 5px 0 var(--hotpink); }
.st-form__msg { min-height: 20px; margin-top: 14px; font-family: var(--f-pixel); font-size: 10px; color: var(--red); }
.st-cities { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.st-cities li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border: 2px solid var(--ink); background: var(--white); font-family: var(--f-pixel); font-size: 10px; }
.st-cities li.is-new { background: var(--hotpink); animation: popIn .45s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes popIn { from { transform: scale(0); } }
.st-cities button { width: 20px; height: 20px; display: grid; place-items: center; font-size: 12px; border: 1.5px solid var(--ink); }
.st-cities button:hover { background: var(--red); color: var(--white); }
.st-note { margin-top: 18px; font-size: 11px; opacity: .6; }

/* ---------- cards ---------- */
.st-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 0 var(--gutter) clamp(70px, 9vw, 120px); }
.st-card { position: relative; display: grid; gap: 10px; align-content: start; padding: 26px 22px 60px; border: 2px solid var(--ink); background: var(--white); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s; }
.st-card:hover { transform: translate(-4px, -4px) rotate(-1deg); box-shadow: 8px 8px 0 var(--ink); }
.st-card--pink { background: var(--pink); }
.st-card--ink { background: var(--ink); color: var(--white); }
.st-card--ink:hover { box-shadow: 8px 8px 0 var(--hotpink); }
.st-card__ico { font-size: 36px; line-height: 1; }
.st-card b { font-family: var(--f-display); font-weight: 400; font-size: 30px; line-height: 1; }
.st-card span:not(.st-card__ico) { font-size: 13px; }
.st-card i { position: absolute; left: 22px; bottom: 20px; font-style: normal; font-family: var(--f-pixel); font-size: 10px; }

@media (max-width: 900px) {
  .st-hero { grid-template-columns: 1fr; }
  .st-cards { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .st-form { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .st-radar__sweep, .st-blip i { animation: none; }
}