/*
 * Coinpusher-Shop in the theme layout (includes/coinpusher-shop-page.php, coinpusher-shop-legal.php).
 * Same tokens, cards and buttons as rankings/profile; only the item previews keep a dark "stream" stage.
 */
.cc-shop{--shop-ok:#2f9e5b;--shop-warn:#c98a00;--shop-bad:#e5484d;--shop-tw:#9146ff;padding-top:24px;padding-bottom:40px;display:grid;gap:18px}
.cc-shop .cc-live-breadcrumb{margin:0}
.cc-shop-hero{display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px}
.cc-shop-hero h1{margin:.2rem 0 .4rem;font-size:clamp(2rem,4.4vw,3rem)}
.cc-shop-hero p{margin:0 0 .6rem}
.cc-shop-only{padding:10px 14px;border-radius:12px;background:var(--cc-surface-2);border:1px solid var(--cc-border);border-left:4px solid var(--shop-ok);font-size:.95rem}
.cc-shop-only strong{color:var(--cc-text)}
.cc-shop-hero-coin{width:96px!important;height:96px!important}

/* Content boxes = theme cards */
.cc-shop .box{margin:0;padding:clamp(18px,3vw,26px);border-radius:18px;background:var(--cc-surface);border:1px solid var(--cc-border);color:var(--cc-text)}
.cc-shop .box h2{margin:0 0 .6rem;font-size:1.25rem}
.cc-shop .box.warn{border-left:4px solid var(--shop-warn)}
.cc-shop .box.msg{border-left:4px solid var(--shop-ok);font-weight:750}
.cc-shop .box.admin{border-style:dashed}
.cc-shop .tag{display:inline-block;font-size:.72rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px;border:1px solid currentColor;color:var(--cc-muted)}
.cc-shop .box.warn .tag{color:var(--shop-warn)}
.cc-shop .lead{color:var(--cc-muted);margin:.2em 0 .6em}
.cc-shop .mut{color:var(--cc-muted);font-size:.88rem}
.cc-shop .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.cc-shop .row form{margin:0}
.cc-shop .status{display:flex;gap:8px;align-items:flex-start;font-size:.9rem;margin:.8em 0 0;color:var(--cc-muted)}
.cc-shop .dot{flex:0 0 10px;height:10px;margin-top:6px;border-radius:50%;background:var(--shop-bad)}
.cc-shop .dot.ok{background:var(--shop-ok)}.cc-shop .dot.warn{background:var(--shop-warn)}
.cc-shop code{background:var(--cc-surface-2);padding:1px 6px;border-radius:6px;word-break:break-all}
.cc-shop input[type=text]{min-height:40px;padding:6px 10px;border-radius:10px;border:1px solid var(--cc-border);background:var(--cc-surface-2);color:var(--cc-text);font:inherit}

/* Buttons = theme pills (.cc-live-btn look) */
.cc-shop .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border:0;border-radius:999px;font:inherit;font-weight:850;color:#fff;cursor:pointer;text-decoration:none;background:#e5484d}
.cc-shop .btn:hover{filter:brightness(1.07)}
.cc-shop .btn.tw{background:var(--shop-tw)}
.cc-shop .btn.ghost{background:var(--cc-surface-2);color:var(--cc-text);border:1px solid var(--cc-border)}
.cc-shop .btn.small{min-height:38px;padding:0 14px;font-size:.9rem}

/* Chat code */
.cc-shop .code{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:.6em 0}
.cc-shop .code kbd{font:900 clamp(1.4rem,6vw,2rem)/1 ui-monospace,Consolas,monospace;letter-spacing:.12em;padding:12px 16px;border-radius:12px;background:#12051f;border:1px solid #5fffe0;color:#5fffe0;user-select:all}

/* Item sections */
.cc-shop h2.sec{margin:14px 0 0;font-size:1.45rem}
.cc-shop h2.sec+.mut{margin:0 0 -4px}
.cc-shop .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.cc-shop .card{position:relative;display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:16px;background:var(--cc-surface);border:1px solid var(--cc-border);transition:transform .15s,box-shadow .15s}
.cc-shop .card:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.16)}
.cc-shop .card.on{border-color:var(--shop-ok);box-shadow:0 0 0 1px var(--shop-ok)}
.cc-shop .card h3{margin:0;font-size:1rem}
.cc-shop .card form{margin:0}
.cc-shop .price{font-size:1.3rem;font-weight:900;color:var(--cc-text)}
.cc-shop .badge{position:absolute;z-index:2;top:-9px;right:12px;font-size:.7rem;font-weight:850;padding:2px 9px;border-radius:999px;background:var(--shop-ok);color:#fff}
.cc-shop details.buy{margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.cc-shop details.buy summary{list-style:none}
.cc-shop details.buy summary::-webkit-details-marker{display:none}
.cc-shop details.buy summary::after{content:none}
.cc-shop details.buy summary.btn{padding:0 14px;width:100%}
.cc-shop details.buy[open] summary{display:none}
.cc-shop details.buy label{display:flex;gap:8px;align-items:flex-start;font-size:.8rem;color:var(--cc-muted);margin:6px 0}
.cc-shop details.buy input[type=checkbox]{margin-top:3px;width:18px;height:18px;flex:0 0 18px;accent-color:#e5484d}

/* Item previews: dark stream stage in both themes */
.cc-shop .pv{position:relative;height:96px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:10px;overflow:hidden;background:radial-gradient(circle at 50% 120%,rgba(255,95,180,.25),transparent 60%),#12051f;border:1px solid rgba(205,184,255,.12)}
.cc-shop .coin{display:inline-block;width:56px;height:56px;border-radius:50%;--c:#ffd166;--g:#fff3b0;background:radial-gradient(circle at 35% 30%,var(--g) 0 18%,var(--c) 45%,color-mix(in srgb,var(--c) 60%,#000) 100%);box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--c) 70%,#fff),inset 0 0 0 7px color-mix(in srgb,var(--c) 75%,#000),0 0 18px var(--c)}
.cc-shop .coin.mini{width:30px;height:30px;box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--c) 70%,#fff),0 0 10px var(--c)}
.cc-shop .coin.spin{animation:cc-shop-spin 2.6s linear infinite,cc-shop-glow 1.6s ease-in-out infinite alternate}
@keyframes cc-shop-spin{0%{transform:rotateY(0)}50%{transform:rotateY(180deg) scaleX(.96)}100%{transform:rotateY(360deg)}}
@keyframes cc-shop-glow{from{filter:brightness(.95)}to{filter:brightness(1.25) drop-shadow(0 0 10px var(--g))}}
.cc-shop .pv-frame{flex-direction:column;gap:6px}
.cc-shop .plate{font-weight:800;font-size:.9rem;padding:3px 12px;border-radius:999px;background:#1d0b33;border:2px solid #fff;color:#fff}
.cc-shop .plate-gold{border-color:#ffd166;color:#fff3b0;box-shadow:0 0 12px rgba(255,209,102,.7);background:linear-gradient(110deg,#2a1a05 30%,#5a3d0a 45%,#2a1a05 60%);background-size:250% 100%;animation:cc-shop-shine 2.4s linear infinite}
.cc-shop .plate-neon{border-color:#5fffe0;color:#d6fff8;animation:cc-shop-neon 1.2s ease-in-out infinite alternate}
.cc-shop .plate-rainbow{border:2px solid transparent;background:linear-gradient(#1d0b33,#1d0b33) padding-box,linear-gradient(90deg,#ff5f5f,#ffd166,#7dff9f,#5fd3ff,#a35cff,#ff5fb4,#ff5f5f) border-box;background-size:100% 100%,300% 100%;animation:cc-shop-rainbow 3s linear infinite}
@keyframes cc-shop-shine{from{background-position:120% 0}to{background-position:-120% 0}}
@keyframes cc-shop-neon{from{box-shadow:0 0 6px #5fffe0,inset 0 0 4px #5fffe0}to{box-shadow:0 0 18px #5fffe0,0 0 30px #ff5fb4,inset 0 0 8px #5fffe0}}
@keyframes cc-shop-rainbow{from{background-position:0 0,0 0}to{background-position:0 0,300% 0}}
.cc-shop .pv-fx .coin.drop{width:34px;height:34px;animation:cc-shop-drop 1.8s cubic-bezier(.5,0,.75,1) infinite}
.cc-shop .burst{position:absolute;left:50%;top:66%;width:0;height:0}
.cc-shop .burst i{position:absolute;margin:-10px 0 0 -6px;font-style:normal;font-size:20px;opacity:0;animation:cc-shop-pop 1.8s ease-out infinite;--a:calc(var(--i)*60deg)}
.cc-shop .fx-sparkle .burst i{color:#fff3b0;text-shadow:0 0 8px #ffd166}
.cc-shop .fx-hearts .burst i{color:#ff5fb4;text-shadow:0 0 8px #ff5fb4}
.cc-shop .fx-stars .burst i{color:#5fd3ff;text-shadow:0 0 8px #5fd3ff}
@keyframes cc-shop-drop{0%{transform:translateY(-60px)}55%{transform:translateY(18px)}65%{transform:translateY(12px)}75%,100%{transform:translateY(18px);opacity:1}}
@keyframes cc-shop-pop{0%,55%{opacity:0;transform:rotate(var(--a)) translateY(0) scale(.4)}70%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(-46px) scale(1.2)}}

/* Legal links under the items, legal pages */
.cc-shop-legal{color:var(--cc-muted);font-size:.85rem;border-top:1px solid var(--cc-border);padding-top:14px}
.cc-shop-legal a{color:var(--cc-muted)}
.cc-shop-legal-nav{display:flex;flex-wrap:wrap;gap:8px}
.cc-shop-legal-nav .cc-live-btn{width:auto;min-height:36px;padding:0 14px;font-size:.88rem}
.cc-shop-legal-nav [aria-current=page]{border-color:var(--cc-accent)}
.cc-shop-legal-text{max-width:860px}
.cc-shop-legal-text h1{margin:.2em 0 .4em;font-size:clamp(1.7rem,3.6vw,2.3rem)}
.cc-shop-legal-text h2{margin-top:1.4em;font-size:1.2rem}
.cc-shop-legal-text p,.cc-shop-legal-text li{color:var(--cc-muted);line-height:1.65}
.cc-shop-note{padding:10px 14px;border-radius:12px;background:var(--cc-surface-2);border-left:4px solid var(--shop-warn);margin-bottom:12px}

@media(max-width:720px){
  .cc-shop-hero{grid-template-columns:1fr}
  .cc-shop-hero-coin{display:none!important}
}
@media(max-width:520px){
  .cc-shop .grid{grid-template-columns:1fr 1fr;gap:10px}
  .cc-shop .card{padding:10px}
  .cc-shop .pv{height:80px}
  .cc-shop .btn{width:100%}
  .cc-shop .row .btn,.cc-shop .row form{width:auto}
  .cc-shop .card .btn{padding:0 10px}
}
@media(max-width:360px){.cc-shop .grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.cc-shop *{animation:none!important;transition:none!important}}

/* Sondermünze (V0.9.6): Aufdruck rund im Goldrand */
.cc-skin-coin{position:relative;overflow:hidden}
.cc-skin-coin img{position:absolute;inset:12%;width:76%;height:76%;border-radius:50%;object-fit:cover;background:#fff6dc}
.cc-skin-full img{inset:0;width:100%;height:100%;background:transparent}
.cc-skin-avatar span{position:absolute;inset:12%;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#9146ff;font-size:2em}

/* 4-for-3 bundle (owner 14.11.2026): red banderole from the Schwapoly art set across the top-right corner */
.cc-shop .card.bundle{padding:18px 16px 16px;overflow:visible;margin-top:10px;border:2px solid #f2b632;background:linear-gradient(160deg,rgba(242,182,50,.14),var(--cc-surface) 55%)}
.cc-shop .card.bundle h3{font-size:1.2rem;padding-right:150px}
.cc-shop .banderole{position:absolute;z-index:2;top:-22px;right:-10px;width:220px;height:68px;transform:rotate(7deg);background:center/contain no-repeat;display:flex;align-items:center;justify-content:center;pointer-events:none;filter:drop-shadow(0 4px 8px rgba(0,0,0,.25))}
.cc-shop .banderole span{margin:-10px 6px 0 0;font:900 .95rem/1 "Arial Black","Segoe UI",sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#fff;text-shadow:0 2px 0 #7a0d12,0 0 6px rgba(0,0,0,.35)}
.cc-shop .card.bundle s{font-size:1rem}
.cc-shop .picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;margin:10px 0}
.cc-shop .pick{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border-radius:14px;border:2px solid var(--cc-border);background:var(--cc-surface-2);cursor:pointer;text-align:center;font-size:.82rem;font-weight:750;transition:border-color .15s,transform .15s}
.cc-shop .pick input{position:absolute;top:8px;left:8px;width:18px;height:18px;accent-color:#e5484d}
.cc-shop .pick img{width:64px;height:64px;border-radius:50%;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25))}
.cc-shop .pick.on{border-color:#e5484d;transform:translateY(-2px);box-shadow:0 0 0 2px rgba(229,72,77,.25)}
.cc-shop .pick.owned{opacity:.5;cursor:default}
.cc-shop .pick:has(input:disabled:not(:checked)):not(.owned){opacity:.65}
@media (max-width:560px){.cc-shop .card.bundle h3{padding-right:0;margin-top:22px}.cc-shop .banderole{width:180px;height:56px;right:-8px;top:-20px}.cc-shop .banderole span{font-size:.8rem}}

/* Abo-Münze des Monats (subs only, 14.11.2026) */
.cc-shop .card.abo{border:2px solid #9146ff;background:linear-gradient(160deg,rgba(145,70,255,.14),var(--cc-surface) 60%)}
.cc-shop .abo-row{display:flex;gap:16px;align-items:center}
.cc-shop .abo-coin{flex:0 0 96px;width:96px;height:96px;border-radius:50%;filter:drop-shadow(0 4px 10px rgba(145,70,255,.45))}
@media (max-width:560px){.cc-shop .abo-row{flex-direction:column;text-align:center}}

/* colour bundle swatch (same coin look as the colour previews) */
.cc-shop .pick .swatch{display:block;width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--g) 0 18%,var(--c) 55%,color-mix(in srgb,var(--c) 60%,#000) 100%);box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--c) 70%,#000),0 3px 6px rgba(0,0,0,.25)}