/* Store: cards link through to a page per package. The tier colours (--tier, --tier-glow) come from style.css (.tier-bronze etc). */
.pkg-link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.pkg-link:focus-visible { outline-offset: -3px; }

/* ---- package page ---- */
.back-link { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: 1.4rem; color: var(--muted); font: 600 .9rem var(--font-display); transition: color .15s, transform .15s; }
.back-link:hover { color: var(--text); text-decoration: none; transform: translateX(-3px); }

.pd:not(.tier), .pd-mini:not(.tier) { --tier: var(--accent-2); --tier-glow: rgba(115, 11, 223, .5); } /* only for packages without their own tier colour */
.pd { display: grid; grid-template-columns: minmax(300px, 5fr) 7fr; gap: 2.6rem; align-items: start; }
.pd-visual { position: sticky; top: 88px; isolation: isolate; overflow: hidden; display: grid; place-items: center; align-content: center; gap: 1.6rem; min-height: 460px; padding: 2.2rem;
  border-radius: 26px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)), var(--panel); }
.pd-glow { position: absolute; z-index: -1; left: 50%; top: 42%; width: 130%; aspect-ratio: 1; transform: translate(-50%, -50%); opacity: .55; pointer-events: none;
  background: radial-gradient(closest-side, var(--tier-glow), transparent); animation: pd-breathe 6s ease-in-out infinite; }
@keyframes pd-breathe { 50% { opacity: .85; transform: translate(-50%, -50%) scale(1.08); } }
.pd-logo { width: min(300px, 72%); height: auto; filter: drop-shadow(0 0 38px var(--tier-glow)); animation: pd-float 5.5s ease-in-out infinite; }
@keyframes pd-float { 50% { transform: translateY(-12px) rotate(-1.5deg); } }
.pd-tag { margin: 0; padding: .32rem .9rem; border-radius: 99px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--tier);
  font: 700 .72rem var(--font-display); letter-spacing: .2em; text-transform: uppercase; }
.pd-visual::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: .8;
  background: conic-gradient(from var(--angle), transparent 0 55%, var(--tier) 75%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: spin-angle 8s linear infinite; }

.pd-info .eyebrow { color: var(--tier); } .pd-info .eyebrow::before { background: var(--tier); }
.pd-info h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; margin: 0 0 .7rem; }
.pd-desc { color: #aab1c5; font-size: 1.05rem; line-height: 1.7; max-width: 58ch; margin: 0; }

.pd-buy { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; margin: 1.6rem 0 .9rem; padding: 1.2rem 1.4rem; border-radius: 18px;
  border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)), var(--panel); }
.pd-buy form { margin: 0; }
.pd-price { font: 800 2.3rem var(--font-display); letter-spacing: -.03em; line-height: 1.1; color: var(--tier); }
.pd-price small { margin-left: .35rem; font-size: .85rem; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.pd-billing { margin-top: .2rem; font: 600 .68rem var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pd-buy .btn[aria-disabled="true"] { opacity: .6; cursor: default; }
.pd-limited { margin: 0 0 .4rem; color: var(--warn); font-size: .92rem; font-weight: 600; }

.pd-label { margin: 1.8rem 0 .8rem; font: 700 .72rem var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.pd-perks { list-style: none; margin: 0; padding: 0; overflow: hidden; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); }
.pd-perks li { display: flex; align-items: center; gap: .95rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); font-weight: 500; transition: background .2s, padding-left .25s; }
.pd-perks li:last-child { border-bottom: 0; }
.pd-perks li:hover { background: rgba(255,255,255,.035); padding-left: 1.6rem; }
.pd-perks .ico { flex: none; width: 1.35rem; height: 1.35rem; margin: 0; vertical-align: 0; color: var(--tier); }
.pd-note { display: flex; align-items: flex-start; gap: .8rem; margin-top: 1.1rem; padding: .95rem 1.15rem; border-radius: 14px; border: 1px solid rgba(88, 101, 242, .4); background: rgba(88, 101, 242, .09); font-size: .92rem; line-height: 1.55; }
.pd-note .ico { flex: none; width: 1.25rem; height: 1.25rem; margin: .1rem 0 0; vertical-align: 0; color: #9aa6ff; }

.pd-more { margin-top: 3.2rem; }
.pd-others { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.pd-mini { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "logo name" "logo price"; column-gap: .9rem; align-items: center;
  padding: .9rem 1rem; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); color: var(--text); transition: transform .25s cubic-bezier(.2, .9, .3, 1.3), border-color .25s, box-shadow .25s; }
.pd-mini img { grid-area: logo; filter: drop-shadow(0 0 10px var(--tier-glow)); transition: transform .3s cubic-bezier(.2, .9, .3, 1.5); }
.pd-mini-name { grid-area: name; font: 650 .95rem var(--font-display); } .pd-mini-price { grid-area: price; color: var(--tier); font: 700 .9rem var(--font-display); }
.pd-mini:hover { text-decoration: none; transform: translateY(-4px); border-color: var(--tier); box-shadow: 0 16px 32px -20px var(--tier-glow); } .pd-mini:hover img { transform: scale(1.12) rotate(-5deg); }

@media (max-width: 900px) {
  .pd { grid-template-columns: 1fr; gap: 1.6rem; }
  .pd-visual { position: relative; top: auto; min-height: 300px; padding: 1.6rem; } .pd-logo { width: min(220px, 60%); }
}
@media (prefers-reduced-motion: reduce) { .pd-glow, .pd-logo, .pd-visual::after { animation: none; } }