/* Games4Titans — art-pack design page (2026-09-22). Scoped to .page-art-design. */
.page-art-design .ad-hero { position:relative; min-height:72vh; display:flex; align-items:flex-end; padding:calc(80px + var(--space-xl)) 0 var(--space-2xl); overflow:hidden; }
.page-art-design .ad-hero__media { position:absolute; inset:0; z-index:0; }
.page-art-design .ad-hero__media img, .page-art-design .ad-hero__media video { width:100%; height:100%; object-fit:cover; display:block; }
.page-art-design .ad-hero__media::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(13,10,31,.25) 0%, rgba(13,10,31,.75) 55%, #0d0a1f 100%); }
.page-art-design .ad-hero__body { position:relative; z-index:1; }
.page-art-design .ad-back { display:inline-block; color:var(--text-muted); font-size:var(--fs-small); margin-bottom:var(--space-md); text-decoration:none; }
.page-art-design .ad-back:hover { color:var(--cyan); }
.page-art-design .ad-hero h1 { font-family:'Russo One',sans-serif; color:#fff; font-size:clamp(2rem,5vw,3.6rem); margin:6px 0 var(--space-sm); line-height:1.05; }
.page-art-design .ad-hero__tag { color:var(--text-secondary); font-size:1.1rem; max-width:640px; margin:0 0 var(--space-md); }
.page-art-design .ad-hero__meta { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--space-lg); }
.page-art-design .ad-hero__meta span { font-size:var(--fs-xs); color:var(--text-secondary); border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:3px 12px; background:rgba(13,10,31,.5); }
.page-art-design .ad-hero__price { display:flex; gap:var(--space-lg); margin-bottom:var(--space-lg); }
.page-art-design .ad-hero__price em { display:block; font-style:normal; color:var(--text-muted); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.08em; }
.page-art-design .ad-hero__price b { font-family:inherit; font-weight:700; color:#fff; font-size:1.7rem; font-variant-numeric:tabular-nums; }
.page-art-design .ad-features { list-style:none; padding:0; margin:0 auto var(--space-xl); max-width:900px; display:grid; grid-template-columns:repeat(2,1fr); gap:8px var(--space-lg); }
.page-art-design .ad-features li { display:flex; gap:10px; color:var(--text-secondary); font-size:var(--fs-small); line-height:1.5; }
.page-art-design .ad-features svg { flex:0 0 16px; width:16px; height:16px; margin-top:3px; fill:none; stroke:#08F3FF; stroke-width:2.5; }
.page-art-design .ad-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-md); }
.page-art-design .ad-gallery__item { position:relative; display:block; border-radius:14px; overflow:hidden; border:1px solid var(--border); background:#0d0a1f; }
.page-art-design .ad-gallery__item img { width:100%; aspect-ratio:16/10; object-fit:cover; display:block; transition:transform .4s; }
.page-art-design .ad-gallery__item:hover img { transform:scale(1.03); }
.page-art-design .ad-gallery__item span { position:absolute; left:0; right:0; bottom:0; padding:10px 14px; background:linear-gradient(0deg, rgba(13,10,31,.9), transparent); color:#fff; font-size:var(--fs-small); }
.page-art-design .ad-anim-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-lg); }
.page-art-design .ad-anim__item { background:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:var(--space-md); }
.page-art-design .ad-anim__stage { display:flex; align-items:center; justify-content:center; height:200px; background:repeating-conic-gradient(rgba(255,255,255,.05) 0 25%, transparent 0 50%) 0 0/20px 20px, #16122b; border-radius:12px; margin-bottom:var(--space-sm); }
.page-art-design .ad-anim__stage canvas { max-width:160px; max-height:160px; image-rendering:auto; }
.page-art-design .ad-anim__sheet { position:relative; overflow:hidden; border-radius:10px; border:1px dashed rgba(242,22,134,.5); background:#0d0a1f; margin-bottom:var(--space-sm); }
.page-art-design .ad-anim__sheet img { width:100%; display:block; image-rendering:pixelated; }
.page-art-design .ad-anim__cursor { position:absolute; top:0; left:0; border:2px solid #08F3FF; box-shadow:0 0 12px rgba(8,243,255,.6); border-radius:3px; pointer-events:none; }
.page-art-design .ad-anim__info strong { display:block; color:#fff; font-size:.95rem; margin-bottom:2px; }
.page-art-design .ad-anim__info span { display:block; color:var(--text-muted); font-size:var(--fs-xs); line-height:1.5; margin-bottom:8px; }
.page-art-design .ad-anim__toggle { background:transparent; color:var(--cyan); border:1px solid var(--border); border-radius:8px; padding:4px 12px; font-size:var(--fs-xs); cursor:pointer; }
.page-art-design .ad-config__grid { display:grid; grid-template-columns:1.6fr 1fr; gap:var(--space-xl); align-items:start; }
.page-art-design .ad-config__h { font-family:'Russo One',sans-serif; color:#fff; font-size:1rem; margin:var(--space-lg) 0 var(--space-sm); text-transform:uppercase; letter-spacing:.06em; }
.page-art-design .ad-line { display:grid; grid-template-columns:1fr auto auto; gap:var(--space-md); align-items:center; background:var(--bg-card); border:1px solid var(--border); border-radius:14px; padding:var(--space-md) var(--space-lg); margin-bottom:10px; transition:border-color .2s, background .2s; }
.page-art-design .ad-line.on { border-color:var(--cyan); background:rgba(242,22,134,.07); }
.page-art-design .ad-line--base { border-color:rgba(8,243,255,.35); }
.page-art-design .ad-line strong { display:block; color:#fff; font-size:1rem; }
.page-art-design .ad-line span { display:block; color:var(--text-secondary); font-size:var(--fs-small); line-height:1.5; }
.page-art-design .ad-line small { display:inline-block; color:#ff4d6d; font-size:var(--fs-xs); font-weight:700; margin-top:6px; padding:2px 10px; border:1px solid rgba(255,77,109,.55); border-radius:999px; background:rgba(255,77,109,.1); }
.page-art-design .ad-line small::before { content:"⚠ "; }
.page-art-design .ad-line.on small { color:#08F3FF; border-color:rgba(8,243,255,.45); background:rgba(8,243,255,.08); }
.page-art-design .ad-line.on small::before { content:"✓ "; }
.page-art-design .ad-line b { font-family:inherit; font-weight:700; color:#fff; font-size:1.2rem; letter-spacing:.01em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.page-art-design .ad-line em { font-style:normal; color:#08F3FF; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.08em; }
.page-art-design .ad-add { background:transparent; color:#fff; border:1px solid var(--cyan); border-radius:10px; padding:8px 18px; font-family:'Russo One',sans-serif; font-size:.8rem; letter-spacing:.06em; cursor:pointer; transition:background .2s; min-width:92px; }
.page-art-design .ad-add:hover { background:rgba(242,22,134,.18); }
.page-art-design .ad-line.on .ad-add { background:var(--cyan); }
.page-art-design .ad-summary { position:sticky; top:96px; background:var(--bg-card); border:1px solid rgba(242,22,134,.45); border-radius:18px; padding:var(--space-lg); box-shadow:0 20px 60px rgba(242,22,134,.1); }
.page-art-design .ad-summary h3 { font-family:'Russo One',sans-serif; color:#fff; font-size:1rem; margin:0 0 var(--space-md); }
.page-art-design .ad-summary__thumb { display:flex; align-items:center; gap:12px; margin-bottom:var(--space-md); }
.page-art-design .ad-summary__thumb img { width:72px; aspect-ratio:16/10; object-fit:cover; border-radius:8px; }
.page-art-design .ad-summary__thumb span { color:#fff; font-weight:600; }
.page-art-design .ad-summary__lines { list-style:none; padding:0; margin:0 0 var(--space-md); }
.page-art-design .ad-summary__lines li { display:grid; grid-template-columns:1fr auto auto; gap:8px; align-items:center; color:var(--text-secondary); font-size:var(--fs-small); padding:6px 0; border-bottom:1px solid rgba(255,255,255,.06); }
.page-art-design .ad-summary__lines b { color:#fff; font-weight:600; font-variant-numeric:tabular-nums; }
.page-art-design .ad-summary__lines i { font-style:normal; color:var(--text-muted); cursor:pointer; padding:0 4px; }
.page-art-design .ad-summary__lines i:hover { color:var(--cyan); }
.page-art-design .ad-summary__total { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.page-art-design .ad-summary__total span { color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; font-size:var(--fs-xs); }
.page-art-design .ad-summary__total b { font-family:'Russo One',sans-serif; color:#fff; font-size:1.8rem; }
.page-art-design .ad-summary__cap { color:var(--text-muted); font-size:var(--fs-xs); margin:0 0 var(--space-md); min-height:2.4em; }
.page-art-design .ad-summary .btn { width:100%; justify-content:center; margin-bottom:10px; }
.page-art-design .ad-summary__note { color:var(--text-muted); font-size:var(--fs-xs); line-height:1.5; margin:4px 0 0; }
.page-art-design .ad-sold { text-align:center; color:var(--text-secondary); padding:var(--space-xl); border:1px dashed var(--border); border-radius:16px; }
.page-art-design .ad-sold a { color:var(--cyan); }
@media (max-width: 1024px) { .page-art-design .ad-gallery, .page-art-design .ad-anim-grid { grid-template-columns:1fr 1fr; } .page-art-design .ad-config__grid { grid-template-columns:1fr; } .page-art-design .ad-summary { position:static; } }
@media (max-width: 768px) { .page-art-design .ad-gallery, .page-art-design .ad-anim-grid, .page-art-design .ad-features { grid-template-columns:1fr; } .page-art-design .ad-line { grid-template-columns:1fr; } .page-art-design .ad-hero__price { flex-direction:column; gap:var(--space-sm); } .page-art-design .ad-hero { min-height:0; } }