Fix theme activation functionality and CSS conflicts with WordPress core

admin/css/wp-allstars-admin.css

@@ -498,56 +498,62 @@ input:checked + .wp-toggle-slider:before {
     min-height: 400px;
 }
 
-.theme-browser .theme {
+/* Theme Card Styles - Scoped to our plugin only */
-    float: none;
+.theme-card {
-    margin: 0 auto;
-    width: 100%;
-    max-width: none;
-}
-
-.theme-browser .theme .theme-screenshot {
-    display: block;
-    overflow: hidden;
     position: relative;
-    -webkit-backface-visibility: hidden;
-    backface-visibility: hidden;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-}
-
-.theme-browser .theme .theme-screenshot img {
-    height: auto;
-    width: 100%;
-    transform: translateZ(0);
-    position: absolute;
-    left: 0;
-    top: 0;
-    object-fit: cover;
-    transition: opacity .2s ease-in-out;
-}
-
-.theme-browser .theme .theme-name {
-    font-size: 15px;
-    font-weight: 600;
-    margin: 0;
-    padding: 15px;
-    box-shadow: inset 0 1px 0 rgba(0,0,0,.1);
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
     background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 3px;
+    box-shadow: 0 1px 1px rgba(0,0,0,.04);
+    margin-bottom: 20px;
+    overflow: hidden;
 }
 
-.theme-browser .theme .theme-actions {
+.theme-image {
+    position: relative;
+    padding-bottom: 75%; /* 4:3 aspect ratio */
+    background: #f1f1f1;
+    overflow: hidden;
+}
+
+.theme-image img {
     position: absolute;
-    top: 50%;
+    top: 0;
-    transform: translateY(-50%);
+    left: 0;
-    right: 0;
+    width: 100%;
-    padding: 10px 15px;
+    height: 100%;
-    box-shadow: inset 0 1px 0 rgba(0,0,0,.1);
+    object-fit: cover;
-    -webkit-user-select: none;
+    transition: transform 0.3s ease;
-    user-select: none;
+}
+
+.theme-card:hover .theme-image img {
+    transform: scale(1.05);
+}
+
+.theme-info {
+    padding: 15px;
+    border-top: 1px solid #eee;
+}
+
+.theme-name {
+    font-size: 16px;
+    font-weight: 600;
+    margin: 0 0 5px;
+    color: #23282d;
+}
+
+.theme-author {
+    font-size: 13px;
+    color: #646970;
+    margin: 0;
+}
+
+.theme-actions {
+    padding: 15px;
+    border-top: 1px solid #eee;
     display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
     gap: 8px;
 }
 

admin/js/wp-allstars-admin.js

@@ -334,7 +334,7 @@ jQuery(document).ready(function($) {
                 data: {
                     action: 'wp_allstars_activate_theme',
                     theme: slug,
-                    _wpnonce: wpAllstars.nonce
+                    _wpnonce: $button.data('nonce') || wpAllstars.nonce
                 },
                 success: function(response) {
                     if (response.success) {

admin/partials/theme-panel.php

@@ -23,7 +23,7 @@ if (!defined('ABSPATH')) {
             <?php 
             $installed_theme = wp_get_theme('kadence');
             if ($installed_theme->exists()): ?>
-                <button type="button" class="button button-primary activate-now" data-slug="kadence">
+                <button type="button" class="button button-primary activate-now" data-slug="kadence" data-nonce="<?php echo esc_attr(wp_create_nonce('wp-allstars-nonce')); ?>">
                     <?php esc_html_e('Activate'); ?>
                 </button>
             <?php else: ?>