<?php
/**
 * Responsive CSS Generator
 * 
 * Generates dynamic responsive CSS based on breakpoint settings.
 * CSS is cached as an external file for optimal performance.
 */

if (!defined('ABSPATH')) {
    exit;
}

class ZenBlocks_Responsive_CSS_Generator {
    
    private $breakpoints;
    private $upload_dir;
    private $css_filename = 'zenblocks-responsive.css';
    private $css_base_filename = 'zenblocks-responsive-base.css';
    private $version_option = 'zenblocks_responsive_css_version';
    
    public function __construct() {
        $this->upload_dir = wp_upload_dir();
        $this->upload_dir['baseurl'] = set_url_scheme($this->upload_dir['baseurl']);
    }

    /**
     * Initialize the generator with breakpoint settings
     */
    public function init($breakpoints) {
        $this->breakpoints = $breakpoints;
    }

    /**
     * Get the CSS file URL
     */
    public function get_css_url() {
        $version = get_option($this->version_option, '1');
        return $this->upload_dir['baseurl'] . '/zenblocks/' . $this->css_filename . '?ver=' . $version;
    }
    
    /**
     * Get the CSS file path
     */
    public function get_css_path() {
        return $this->upload_dir['basedir'] . '/zenblocks/' . $this->css_filename;
    }
    
    /**
     * Check if CSS file exists and is valid
     */
    public function css_file_exists() {
        return file_exists($this->get_css_path());
    }

    /**
     * Get the base (PC-only) CSS file URL
     */
    public function get_base_css_url() {
        $version = get_option($this->version_option, '1');
        return $this->upload_dir['baseurl'] . '/zenblocks/' . $this->css_base_filename . '?ver=' . $version;
    }

    /**
     * Get the base (PC-only) CSS file path
     */
    public function get_base_css_path() {
        return $this->upload_dir['basedir'] . '/zenblocks/' . $this->css_base_filename;
    }

    /**
     * Check if base CSS file exists
     */
    public function base_css_file_exists() {
        return file_exists($this->get_base_css_path());
    }

    /**
     * Generate and save CSS files (full responsive + PC-only base)
     */
    public function generate_css_file() {
        $css = $this->generate_responsive_css();
        $base_css = $this->generate_pc_only_css();

        $dir = $this->upload_dir['basedir'] . '/zenblocks';
        if (!file_exists($dir)) {
            wp_mkdir_p($dir);
        }

        global $wp_filesystem;
        if (empty($wp_filesystem)) {
            require_once ABSPATH . '/wp-admin/includes/file.php';
            WP_Filesystem();
        }

        $result = $wp_filesystem->put_contents($this->get_css_path(), $css, FS_CHMOD_FILE);
        $wp_filesystem->put_contents($this->get_base_css_path(), $base_css, FS_CHMOD_FILE);

        if ($result !== false) {
            $version = time();
            update_option($this->version_option, $version);
            return true;
        }

        return false;
    }

    /**
     * Regenerate CSS (called when breakpoints change)
     */
    public function regenerate() {
        return $this->generate_css_file();
    }
    
    /**
     * Generate complete responsive CSS
     */
    public function generate_responsive_css() {
        $css = "/* ZenBlocks Responsive CSS - Auto Generated */\n";
        $css .= "/* Do not edit directly - regenerated on breakpoint changes */\n\n";
        
        $enabled = $this->breakpoints['enabled'];
        $values = $this->breakpoints['values'];
        
        $css .= $this->generate_pc_styles($values, $enabled);
        
        if (in_array('md', $enabled)) {
            $css .= $this->generate_md_styles($values);
        }
        
        if (in_array('tb', $enabled)) {
            $css .= $this->generate_tb_styles($values, $enabled);
        }
        
        if (in_array('sp', $enabled)) {
            $css .= $this->generate_sp_styles($values, $enabled);
        }
        
        return $css;
    }

    /**
     * Generate PC-only base CSS (no media queries).
     * Loaded in both editor and frontend for preset previews and base styles.
     */
    public function generate_pc_only_css() {
        $css = "/* ZenBlocks Responsive Base CSS (PC only) - Auto Generated */\n";
        $css .= "/* Do not edit directly - regenerated on breakpoint changes */\n\n";

        $enabled = $this->breakpoints['enabled'];
        $values = $this->breakpoints['values'];

        $css .= $this->generate_pc_styles($values, $enabled);

        return $css;
    }

    /**
     * Generate PC (default) breakpoint styles - no media query wrapper
     */
    private function generate_pc_styles($values, $enabled) {
        $has_md = in_array('md', $enabled);
        $md = $has_md ? $values['md'] : $values['tb'];
        
        $css = "/* PC Breakpoint (>{$md}px) - Base styles */\n";
        $css .= $this->get_pc_block_styles();
        $css .= "\n";
        
        return $css;
    }
    
    /**
     * Generate MD breakpoint styles
     */
    private function generate_md_styles($values) {
        $md = $values['md'];
        $tb = $values['tb'];
        
        $css = "/* MD Breakpoint ({$tb}px - {$md}px) */\n";
        $css .= "@media (min-width: " . ($tb + 1) . "px) and (max-width: {$md}px) {\n";
        $css .= $this->get_md_block_styles();
        $css .= "}\n\n";
        
        return $css;
    }
    
    /**
     * Generate TB breakpoint styles
     */
    private function generate_tb_styles($values, $enabled) {
        $tb = $values['tb'];
        $sp = $values['sp'];
        
        $css = "/* TB Breakpoint ({$sp}px - {$tb}px) */\n";
        $css .= "@media (min-width: " . ($sp + 1) . "px) and (max-width: {$tb}px) {\n";
        $css .= $this->get_tb_block_styles($enabled);
        $css .= "}\n\n";
        
        return $css;
    }
    
    /**
     * Generate SP breakpoint styles
     */
    private function generate_sp_styles($values, $enabled) {
        $sp = $values['sp'];
        
        $css = "/* SP Breakpoint (~{$sp}px) */\n";
        $css .= "@media (max-width: {$sp}px) {\n";
        $css .= $this->get_sp_block_styles($enabled);
        $css .= "}\n\n";
        
        return $css;
    }
    
    /**
     * Get PC block styles (no fallback needed - these are the base values)
     */
    private function get_pc_block_styles() {
        return $this->get_button_basic_pc_styles() .
               $this->get_text_basic_pc_styles();
    }
    
    /**
     * Get MD block styles
     */
    private function get_md_block_styles() {
        return $this->get_button_basic_styles('md') .
               $this->get_text_basic_styles('md');
    }
    
    /**
     * Get TB block styles
     */
    private function get_tb_block_styles($enabled) {
        $has_md = in_array('md', $enabled);
        return $this->get_button_basic_styles('tb', $has_md) .
               $this->get_text_basic_styles('tb', $has_md);
    }
    
    /**
     * Get SP block styles
     */
    private function get_sp_block_styles($enabled) {
        $has_md = in_array('md', $enabled);
        $has_tb = in_array('tb', $enabled);
        return $this->get_button_basic_styles('sp', $has_md, $has_tb) .
               $this->get_text_basic_styles('sp', $has_md, $has_tb);
    }
    
    /**
     * Generate button basic PC styles (base styles without media query)
     */
    private function get_button_basic_pc_styles() {
        $selector = '.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic';
        
        $css = "/* Button Basic - pc */\n";
        
        $css .= "{$selector} {\n";
        $css .= "  width: var(--layout-width-pc, auto);\n";
        $css .= "  min-width: var(--layout-width-min-pc, auto);\n";
        $css .= "  max-width: var(--layout-width-max-pc, none) !important;\n";
        $css .= "  margin-top: var(--spacing-margin-top-pc, 0) !important;\n";
        $css .= "  margin-right: var(--spacing-margin-right-pc, 0) !important;\n";
        $css .= "  margin-bottom: var(--spacing-margin-bottom-pc, 0) !important;\n";
        $css .= "  margin-left: var(--spacing-margin-left-pc, 0) !important;\n";
        $css .= "}\n";

        // Custom position styles (only when .is-custom-position-pc class is present)
        $css .= "{$selector}.is-custom-position-pc {\n";
        $css .= "  position: var(--layout-position-type-pc, relative);\n";
        $css .= "  top: var(--layout-position-top-pc, auto);\n";
        $css .= "  right: var(--layout-position-right-pc, auto);\n";
        $css .= "  bottom: var(--layout-position-bottom-pc, auto);\n";
        $css .= "  left: var(--layout-position-left-pc, auto);\n";
        $css .= "  z-index: var(--layout-z-index-pc, auto);\n";
        $css .= "  transform: translate(var(--layout-transform-translate-x-pc, 0), var(--layout-transform-translate-y-pc, 0));\n";
        $css .= "}\n";
        
        $css .= "{$selector} > a,\n{$selector} > button {\n";
        $css .= "  font-size: var(--font-size-pc, inherit) !important;\n";
        $css .= "  padding-top: var(--spacing-padding-top-pc, 0) !important;\n";
        $css .= "  padding-right: var(--spacing-padding-right-pc, 0) !important;\n";
        $css .= "  padding-bottom: var(--spacing-padding-bottom-pc, 0) !important;\n";
        $css .= "  padding-left: var(--spacing-padding-left-pc, 0) !important;\n";
        $css .= "  height: var(--layout-height-pc, auto) !important;\n";
        $css .= "  min-height: var(--layout-height-min-pc, auto) !important;\n";
        $css .= "  max-height: var(--layout-height-max-pc, none) !important;\n";
        $css .= "  border-width: var(--styling-border-width-pc, 0) !important;\n";
        $css .= "  border-style: var(--styling-border-style-pc, none) !important;\n";
        $css .= "  border-color: var(--styling-border-color-pc, transparent) !important;\n";
        $css .= "  box-sizing: var(--styling-box-sizing-pc, border-box) !important;\n";
        // 外側の角丸 = JS側で計算済み（角丸0なら0、0以外なら角丸+ボーダー幅）
        $css .= "  border-top-left-radius: var(--styling-radius-outer-top-left-pc, var(--styling-radius-top-left-pc, 0px)) !important;\n";
        $css .= "  border-top-right-radius: var(--styling-radius-outer-top-right-pc, var(--styling-radius-top-right-pc, 0px)) !important;\n";
        $css .= "  border-bottom-right-radius: var(--styling-radius-outer-bottom-right-pc, var(--styling-radius-bottom-right-pc, 0px)) !important;\n";
        $css .= "  border-bottom-left-radius: var(--styling-radius-outer-bottom-left-pc, var(--styling-radius-bottom-left-pc, 0px)) !important;\n";
        $css .= "  box-shadow: var(--styling-shadow-pc, none) !important;\n";
        $css .= "  opacity: var(--styling-opacity-pc, 1) !important;\n";
        $css .= "  mix-blend-mode: var(--styling-mix-blend-mode-pc, normal) !important;\n";
        $css .= "}\n";
        
        // Inner shadow overlay (::after pseudo-element)
        // ボタン本体の外側角丸 = 設定値 + ボーダー幅 なので、ボーダー内側の角丸 = 設定値
        // ::afterはボーダー内側に配置されるため、角丸は設定値をそのまま使用
        $css .= "{$selector} > a::after,\n{$selector} > button::after {\n";
        $css .= "  border-top-left-radius: var(--styling-radius-top-left-pc, 0px) !important;\n";
        $css .= "  border-top-right-radius: var(--styling-radius-top-right-pc, 0px) !important;\n";
        $css .= "  border-bottom-right-radius: var(--styling-radius-bottom-right-pc, 0px) !important;\n";
        $css .= "  border-bottom-left-radius: var(--styling-radius-bottom-left-pc, 0px) !important;\n";
        $css .= "  box-shadow: var(--styling-inner-shadow-pc, none) !important;\n";
        $css .= "}\n";

        // Frame animation container (inner border-radius = outer radius - border width)
        $css .= "{$selector} > a .wp-block-zenblocks-button-basic-frame,\n{$selector} > button .wp-block-zenblocks-button-basic-frame {\n";
        $css .= "  border-top-left-radius: max(0px, calc(var(--styling-radius-top-left-pc, 0px) - var(--styling-border-width-pc, 0px))) !important;\n";
        $css .= "  border-top-right-radius: max(0px, calc(var(--styling-radius-top-right-pc, 0px) - var(--styling-border-width-pc, 0px))) !important;\n";
        $css .= "  border-bottom-right-radius: max(0px, calc(var(--styling-radius-bottom-right-pc, 0px) - var(--styling-border-width-pc, 0px))) !important;\n";
        $css .= "  border-bottom-left-radius: max(0px, calc(var(--styling-radius-bottom-left-pc, 0px) - var(--styling-border-width-pc, 0px))) !important;\n";
        $css .= "}\n";

        // PC text styles are now handled by SCSS only (CSS variables + _text.scss)
        // get_button_text_pc_styles() removed to maintain editor/frontend consistency
        $css .= $this->get_button_text_main_height_pc_styles();
        $css .= $this->get_button_micro_sub_text_pc_styles();
        $css .= $this->get_button_icon_pc_styles();
        $css .= $this->get_button_background_pc_styles();
        $css .= $this->get_button_thumbnail_pc_styles();
        $css .= $this->get_button_band_pc_styles();
        $css .= $this->get_button_copy_pc_styles();
        $css .= $this->get_button_hover_pc_styles();
        
        return $css;
    }
    
    /**
     * Generate button text main height PC styles
     * Note: font-size, font-weight, line-height, letter-spacing for .default/.hover
     * are now handled by SCSS only (_text.scss) to maintain editor/frontend consistency
     */
    private function get_button_text_main_height_pc_styles() {
        $selector = '.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic';

        $css = "{$selector} > a .wp-block-zenblocks-button-basic-text .wp-block-zenblocks-button-basic-text-main,\n";
        $css .= "{$selector} > button .wp-block-zenblocks-button-basic-text .wp-block-zenblocks-button-basic-text-main {\n";
        $css .= "  height: var(--text-main-height-pc, 1.6em);\n";
        $css .= "}\n";

        return $css;
    }

    /**
     * Generate button text PC styles (DEPRECATED - kept for reference)
     * Font styles for .default/.hover are now in SCSS only
     */
    private function get_button_text_pc_styles() {
        // This function is no longer called - PC text styles are handled by SCSS
        return '';
    }

    /**
     * Generate button micro/sub text PC styles
     */
    private function get_button_micro_sub_text_pc_styles() {
        $selector = '.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic';

        // Micro Text
        $css = "{$selector} > a .wp-block-zenblocks-button-basic-text-micro,\n";
        $css .= "{$selector} > button .wp-block-zenblocks-button-basic-text-micro {\n";
        $css .= "  font-size: var(--micro-text-font-size-pc, 12px);\n";
        $css .= "  font-weight: var(--micro-text-font-weight-pc, inherit);\n";
        $css .= "  letter-spacing: var(--micro-text-letter-spacing-pc, 0);\n";
        $css .= "  line-height: var(--micro-text-line-height-pc, 1.2);\n";
        $css .= "  margin-top: var(--micro-text-margin-top-pc, 0);\n";
        $css .= "  margin-right: var(--micro-text-margin-right-pc, 0);\n";
        $css .= "  margin-bottom: var(--micro-text-margin-bottom-pc, 0);\n";
        $css .= "  margin-left: var(--micro-text-margin-left-pc, 0);\n";
        $css .= "  padding-top: var(--micro-text-padding-top-pc, 0);\n";
        $css .= "  padding-right: var(--micro-text-padding-right-pc, 0);\n";
        $css .= "  padding-bottom: var(--micro-text-padding-bottom-pc, 0);\n";
        $css .= "  padding-left: var(--micro-text-padding-left-pc, 0);\n";
        $css .= "  transform: rotate(var(--micro-text-rotate-pc, 0deg));\n";
        $css .= "}\n";

        // Sub Text
        $css .= "{$selector} > a .wp-block-zenblocks-button-basic-text-sub,\n";
        $css .= "{$selector} > button .wp-block-zenblocks-button-basic-text-sub {\n";
        $css .= "  font-size: var(--sub-text-font-size-pc, 12px);\n";
        $css .= "  font-weight: var(--sub-text-font-weight-pc, inherit);\n";
        $css .= "  letter-spacing: var(--sub-text-letter-spacing-pc, 0);\n";
        $css .= "  line-height: var(--sub-text-line-height-pc, 1.2);\n";
        $css .= "  margin-top: var(--sub-text-margin-top-pc, 0);\n";
        $css .= "  margin-right: var(--sub-text-margin-right-pc, 0);\n";
        $css .= "  margin-bottom: var(--sub-text-margin-bottom-pc, 0);\n";
        $css .= "  margin-left: var(--sub-text-margin-left-pc, 0);\n";
        $css .= "  padding-top: var(--sub-text-padding-top-pc, 0);\n";
        $css .= "  padding-right: var(--sub-text-padding-right-pc, 0);\n";
        $css .= "  padding-bottom: var(--sub-text-padding-bottom-pc, 0);\n";
        $css .= "  padding-left: var(--sub-text-padding-left-pc, 0);\n";
        $css .= "  transform: rotate(var(--sub-text-rotate-pc, 0deg));\n";
        $css .= "}\n";

        return $css;
    }

    /**
     * Generate button icon PC styles
     */
    private function get_button_icon_pc_styles() {
        $selector = '.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic';
        
        $css = "{$selector}.has-icon .wp-block-zenblocks-button-basic-content {\n";
        $css .= "  gap: var(--icon-gap-pc, 0.5em);\n";
        $css .= "}\n";
        
        $css .= "{$selector} .wp-block-zenblocks-button-basic-icon {\n";
        $css .= "  width: var(--icon-size-pc, 25px) !important;\n";
        $css .= "  height: var(--icon-size-pc, 25px) !important;\n";
        $css .= "  left: var(--icon-left-pc, 50%) !important;\n";
        $css .= "  right: var(--icon-right-pc, auto) !important;\n";
        $css .= "  top: var(--icon-top-pc, 50%) !important;\n";
        $css .= "  bottom: var(--icon-bottom-pc, auto) !important;\n";
        $css .= "  transform: translateX(var(--icon-transform-x-pc, -50%)) translateY(var(--icon-transform-y-pc, -50%)) !important;\n";
        $css .= "  transition: width var(--icon-transition-duration, 300ms) var(--icon-transition-easing, ease) var(--icon-transition-delay, 0ms),\n";
        $css .= "              height var(--icon-transition-duration, 300ms) var(--icon-transition-easing, ease) var(--icon-transition-delay, 0ms),\n";
        $css .= "              top var(--icon-transition-duration, 300ms) var(--icon-transition-easing, ease) var(--icon-transition-delay, 0ms),\n";
        $css .= "              left var(--icon-transition-duration, 300ms) var(--icon-transition-easing, ease) var(--icon-transition-delay, 0ms),\n";
        $css .= "              right var(--icon-transition-duration, 300ms) var(--icon-transition-easing, ease) var(--icon-transition-delay, 0ms),\n";
        $css .= "              bottom var(--icon-transition-duration, 300ms) var(--icon-transition-easing, ease) var(--icon-transition-delay, 0ms),\n";
        $css .= "              transform var(--icon-transition-duration, 300ms) var(--icon-transition-easing, ease) var(--icon-transition-delay, 0ms) !important;\n";
        $css .= "}\n";
        
        // SCSSと同じ詳細度にするため > a, > button を追加
        $css .= "{$selector} > a .wp-block-zenblocks-button-basic-icon.wrap_icon:before,\n";
        $css .= "{$selector} > button .wp-block-zenblocks-button-basic-icon.wrap_icon:before {\n";
        $css .= "  width: var(--icon-frame-width-pc, 40px);\n";
        $css .= "  height: var(--icon-frame-height-pc, 40px);\n";
        $css .= "  border-radius: var(--icon-frame-radius-pc, 0);\n";
        $css .= "  border-top-width: var(--icon-frame-border-top-width-pc, 0);\n";
        $css .= "  border-right-width: var(--icon-frame-border-right-width-pc, 0);\n";
        $css .= "  border-bottom-width: var(--icon-frame-border-bottom-width-pc, 0);\n";
        $css .= "  border-left-width: var(--icon-frame-border-left-width-pc, 0);\n";
        $css .= "  border-color: var(--icon-frame-border-color-pc, transparent);\n";
        $css .= "  border-style: var(--icon-frame-border-style-pc, solid);\n";
        $css .= "  background: var(--icon-frame-bg-color-pc, transparent);\n";
        $css .= "}\n";

        return $css;
    }
    
    /**
     * Generate button background PC styles
     */
    private function get_button_background_pc_styles() {
        $selector = '.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic';
        
        // Background Overlay - Default state (crossfade method)
        $css = "{$selector} > a .wp-block-zenblocks-button-basic-bg-overlay.default,\n";
        $css .= "{$selector} > button .wp-block-zenblocks-button-basic-bg-overlay.default {\n";
        $css .= "  background-image: var(--background-color-pc, none) !important;\n";
        $css .= "  opacity: var(--background-color-opacity-pc, 1) !important;\n";
        $css .= "  mix-blend-mode: var(--background-color-mix-blend-mode-pc, normal) !important;\n";
        $css .= "  transition: opacity var(--background-transition-duration, 150ms) var(--background-transition-easing, ease) var(--background-transition-delay, 0ms) !important;\n";
        $css .= "}\n";

        // Background Overlay - Hover state (initially hidden, with fallback to prevent white flash)
        // ホバー離脱時: .default が先にフェードインするよう遅延付きでフェードアウト
        $css .= "{$selector} > a .wp-block-zenblocks-button-basic-bg-overlay.hover,\n";
        $css .= "{$selector} > button .wp-block-zenblocks-button-basic-bg-overlay.hover {\n";
        $css .= "  background-image: var(--background-color-pc-hover, var(--background-color-pc, none)) !important;\n";
        $css .= "  opacity: 0 !important;\n";
        $css .= "  mix-blend-mode: var(--background-color-mix-blend-mode-pc-hover, var(--background-color-mix-blend-mode-pc, normal)) !important;\n";
        $css .= "  transition: opacity var(--background-transition-duration, 150ms) var(--background-transition-easing, ease) calc(var(--background-transition-delay, 0ms) + var(--background-transition-duration, 150ms) * 0.5) !important;\n";
        $css .= "}\n";

        // Background Base Color - Default state (independent layer for color/gradient)
        $css .= "{$selector} > a .wp-block-zenblocks-button-basic-bg-base-color.default,\n";
        $css .= "{$selector} > button .wp-block-zenblocks-button-basic-bg-base-color.default {\n";
        $css .= "  background-color: var(--background-base-color-pc, transparent);\n";
        $css .= "  background-image: var(--background-base-gradient-pc, none);\n";
        $css .= "  transition: background-color var(--background-transition-duration, 150ms) var(--background-transition-easing, ease) var(--background-transition-delay, 0ms) !important;\n";
        $css .= "}\n";

        // Background Image - Default state
        $css .= "{$selector} > a .wp-block-zenblocks-button-basic-bg-image.default,\n";
        $css .= "{$selector} > button .wp-block-zenblocks-button-basic-bg-image.default {\n";
        $css .= "  background-image: var(--background-image-pc, none);\n";
        $css .= "  background-size: var(--background-size-pc, cover);\n";
        $css .= "  background-position: var(--background-position-pc, center);\n";
        $css .= "  background-repeat: var(--background-repeat-pc, no-repeat);\n";
        $css .= "  transition: all var(--background-transition-duration, 150ms) var(--background-transition-easing, ease) var(--background-transition-delay, 0ms) !important;\n";
        $css .= "}\n";

        // Background Pattern - Default state (CSS variable switching for hover)
        $css .= "{$selector} > a .wp-block-zenblocks-button-basic-bg-pattern.default,\n";
        $css .= "{$selector} > button .wp-block-zenblocks-button-basic-bg-pattern.default {\n";
        $css .= "  opacity: var(--background-pattern-opacity-pc, 0.5);\n";
        $css .= "  mix-blend-mode: var(--background-pattern-blend-mode-pc, normal);\n";
        $css .= "  transition: opacity var(--background-transition-duration, 150ms) var(--background-transition-easing, ease) var(--background-transition-delay, 0ms), background-size var(--background-transition-duration, 150ms) var(--background-transition-easing, ease) var(--background-transition-delay, 0ms) !important;\n";
        $css .= "}\n";

        // Background Pattern styles for PC - Default
        $css .= $this->get_pattern_styles_pc('default');

        return $css;
    }
    
    /**
     * Generate pattern background-image styles for PC breakpoint
     */
    private function get_pattern_styles_pc($state) {
        $selector = '.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic';
        $class = $state === 'hover' ? '.hover' : '.default';
        $color_var = $state === 'hover' 
            ? "var(--background-pattern-color-pc-hover, var(--background-pattern-color-pc, #000))"
            : "var(--background-pattern-color-pc, #000)";
        $size_var = $state === 'hover'
            ? "var(--background-pattern-size-pc-hover, var(--background-pattern-size-pc, 10px))"
            : "var(--background-pattern-size-pc, 10px)";
        
        $patterns = array(
            'dots' => "radial-gradient(circle, {$color_var} 1px, transparent 1px)",
            'diagonal-lines' => "repeating-linear-gradient(45deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%)",
            'cross-lines' => "repeating-linear-gradient(45deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%), repeating-linear-gradient(-45deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%)",
            'horizontal-lines' => "repeating-linear-gradient(0deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%)",
            'vertical-lines' => "repeating-linear-gradient(90deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%)",
            'grid' => "linear-gradient({$color_var} 1px, transparent 1px), linear-gradient(90deg, {$color_var} 1px, transparent 1px)",
            'diagonal-grid' => "repeating-linear-gradient(45deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%), repeating-linear-gradient(-45deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%)",
            'circles' => "radial-gradient(circle, transparent 40%, {$color_var} 40%, {$color_var} 50%, transparent 50%)",
            'triangles' => "conic-gradient(from 210deg at 50% 85%, {$color_var} 0deg, {$color_var} 120deg, transparent 120deg)",
        );
        
        $css = '';
        foreach ($patterns as $pattern_name => $pattern_bg) {
            $css .= "{$selector} > a .wp-block-zenblocks-button-basic-bg-pattern{$class}[data-pattern-pc=\"{$pattern_name}\"],\n";
            $css .= "{$selector} > button .wp-block-zenblocks-button-basic-bg-pattern{$class}[data-pattern-pc=\"{$pattern_name}\"] {\n";
            $css .= "  background-image: {$pattern_bg};\n";
            $css .= "  background-size: {$size_var} {$size_var};\n";
            $css .= "}\n";
        }
        
        return $css;
    }

    /**
     * Generate pattern background-image styles for PC breakpoint on hover
     * Targets .default class with parent :hover selector
     */
    private function get_pattern_styles_pc_hover() {
        $selector = '.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic';
        $color_var = "var(--background-pattern-color-pc-hover, var(--background-pattern-color-pc, #000))";
        $size_var = "var(--background-pattern-size-pc-hover, var(--background-pattern-size-pc, 10px))";

        $patterns = array(
            'dots' => "radial-gradient(circle, {$color_var} 1px, transparent 1px)",
            'diagonal-lines' => "repeating-linear-gradient(45deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%)",
            'cross-lines' => "repeating-linear-gradient(45deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%), repeating-linear-gradient(-45deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%)",
            'horizontal-lines' => "repeating-linear-gradient(0deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%)",
            'vertical-lines' => "repeating-linear-gradient(90deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%)",
            'grid' => "linear-gradient({$color_var} 1px, transparent 1px), linear-gradient(90deg, {$color_var} 1px, transparent 1px)",
            'diagonal-grid' => "repeating-linear-gradient(45deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%), repeating-linear-gradient(-45deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%)",
            'circles' => "radial-gradient(circle, transparent 40%, {$color_var} 40%, {$color_var} 50%, transparent 50%)",
            'triangles' => "conic-gradient(from 210deg at 50% 85%, {$color_var} 0deg, {$color_var} 120deg, transparent 120deg)",
        );

        $css = '';
        foreach ($patterns as $pattern_name => $pattern_bg) {
            $css .= "{$selector} > a:hover .wp-block-zenblocks-button-basic-bg-pattern.default[data-pattern-pc=\"{$pattern_name}\"],\n";
            $css .= "{$selector} > button:hover .wp-block-zenblocks-button-basic-bg-pattern.default[data-pattern-pc=\"{$pattern_name}\"] {\n";
            $css .= "  background-image: {$pattern_bg} !important;\n";
            $css .= "  background-size: {$size_var} {$size_var} !important;\n";
            $css .= "}\n";
        }

        return $css;
    }

    /**
     * Generate band pattern background-image styles for PC on hover
     * Targets .default class with parent :hover selector
     * Parallel to get_pattern_styles_pc_hover() but for band patterns
     */
    private function get_band_pattern_styles_pc_hover() {
        $selector = '.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic';
        $color_var = "var(--band-pattern-color-pc-hover, var(--band-pattern-color-pc, #000))";
        $size_var = "var(--band-pattern-size-pc-hover, var(--band-pattern-size-pc, 10px))";

        $patterns = array(
            'dots' => "radial-gradient(circle, {$color_var} 1px, transparent 1px)",
            'diagonal-lines' => "repeating-linear-gradient(45deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%)",
            'cross-lines' => "repeating-linear-gradient(45deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%), repeating-linear-gradient(-45deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%)",
            'horizontal-lines' => "repeating-linear-gradient(0deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%)",
            'vertical-lines' => "repeating-linear-gradient(90deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%)",
            'grid' => "linear-gradient({$color_var} 1px, transparent 1px), linear-gradient(90deg, {$color_var} 1px, transparent 1px)",
            'diagonal-grid' => "repeating-linear-gradient(45deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%), repeating-linear-gradient(-45deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%)",
            'circles' => "radial-gradient(circle, transparent 40%, {$color_var} 40%, {$color_var} 50%, transparent 50%)",
            'triangles' => "conic-gradient(from 210deg at 50% 85%, {$color_var} 0deg, {$color_var} 120deg, transparent 120deg)",
        );

        $css = '';
        foreach ($patterns as $pattern_name => $pattern_bg) {
            $css .= "{$selector} > a:hover .wp-block-zenblocks-button-basic-band .wp-block-zenblocks-button-basic-band-pattern.default[data-pattern-pc=\"{$pattern_name}\"],\n";
            $css .= "{$selector} > button:hover .wp-block-zenblocks-button-basic-band .wp-block-zenblocks-button-basic-band-pattern.default[data-pattern-pc=\"{$pattern_name}\"] {\n";
            $css .= "  background-image: {$pattern_bg} !important;\n";
            $css .= "  background-size: {$size_var} {$size_var} !important;\n";
            $css .= "}\n";
        }

        return $css;
    }

    /**
     * Generate button thumbnail PC styles - CSS Variable Switching Method
     * Uses CSS variable switching for hover states (same as background pattern)
     */
    private function get_button_thumbnail_pc_styles() {
        $selector = '.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic';

        // Thumbnail container
        $css = "{$selector} > a .wp-block-zenblocks-button-basic-thumbnail,\n";
        $css .= "{$selector} > button .wp-block-zenblocks-button-basic-thumbnail {\n";
        $css .= "  width: var(--thumbnail-frame-width-pc, 60px) !important;\n";
        $css .= "  height: var(--thumbnail-frame-height-pc, 60px) !important;\n";
        $css .= "  border-radius: var(--thumbnail-radius-pc, 0);\n";
        $css .= "  box-sizing: var(--thumbnail-box-sizing-pc, border-box);\n";
        $css .= "  border-width: var(--thumbnail-border-width-pc, 0);\n";
        $css .= "  border-style: var(--thumbnail-border-style-pc, none);\n";
        $css .= "  border-color: var(--thumbnail-border-color-pc, transparent);\n";
        $css .= "  left: var(--thumbnail-left-pc, 0);\n";
        $css .= "  right: var(--thumbnail-right-pc, auto);\n";
        $css .= "  top: var(--thumbnail-top-pc, 0);\n";
        $css .= "  bottom: var(--thumbnail-bottom-pc, auto);\n";
        $css .= "  transform: translateX(var(--thumbnail-transform-x-pc, 0)) translateY(var(--thumbnail-transform-y-pc, 0));\n";
        $css .= "  opacity: var(--thumbnail-opacity-pc, 1);\n";
        $css .= "  mix-blend-mode: var(--thumbnail-blend-mode-pc, normal);\n";
        $css .= "  transition: all var(--thumbnail-transition-duration, 300ms) var(--thumbnail-transition-easing, ease) var(--thumbnail-transition-delay, 0ms);\n";
        $css .= "}\n";

        // Thumbnail Image - Default State (CSS variable switching for hover)
        $css .= "{$selector} > a .wp-block-zenblocks-button-basic-thumbnail .wp-block-zenblocks-button-basic-thumbnail-image.default,\n";
        $css .= "{$selector} > button .wp-block-zenblocks-button-basic-thumbnail .wp-block-zenblocks-button-basic-thumbnail-image.default {\n";
        $css .= "  background-color: var(--thumbnail-image-base-color-pc, transparent);\n";
        $css .= "  background-repeat: var(--thumbnail-repeat-pc, no-repeat);\n";
        $css .= "  background-image: var(--thumbnail-image-pc, none);\n";
        $css .= "  background-position: var(--thumbnail-position-pc, 50% 50%);\n";
        $css .= "  background-size: var(--thumbnail-size-pc, cover);\n";
        $css .= "  transition: all var(--thumbnail-transition-duration, 300ms) var(--thumbnail-transition-easing, ease) var(--thumbnail-transition-delay, 0ms) !important;\n";
        $css .= "}\n";

        // Thumbnail Overlay - Default State (Crossfade: visible by default, fades out on hover)
        $css .= "{$selector} > a .wp-block-zenblocks-button-basic-thumbnail .wp-block-zenblocks-button-basic-thumbnail-overlay.default,\n";
        $css .= "{$selector} > button .wp-block-zenblocks-button-basic-thumbnail .wp-block-zenblocks-button-basic-thumbnail-overlay.default {\n";
        $css .= "  background-color: transparent;\n";
        $css .= "  background-image: var(--thumbnail-color-pc, none);\n";
        $css .= "  opacity: var(--thumbnail-color-opacity-pc, 1);\n";
        $css .= "  mix-blend-mode: var(--thumbnail-color-blend-mode-pc, normal);\n";
        $css .= "  transition: opacity var(--thumbnail-transition-duration, 300ms) var(--thumbnail-transition-easing, ease) var(--thumbnail-transition-delay, 0ms);\n";
        $css .= "}\n";

        // Thumbnail Overlay - Hover State (Crossfade: hidden by default, fades in on hover)
        $css .= "{$selector} > a .wp-block-zenblocks-button-basic-thumbnail .wp-block-zenblocks-button-basic-thumbnail-overlay.hover,\n";
        $css .= "{$selector} > button .wp-block-zenblocks-button-basic-thumbnail .wp-block-zenblocks-button-basic-thumbnail-overlay.hover {\n";
        $css .= "  background-color: transparent;\n";
        $css .= "  background-image: var(--thumbnail-color-pc-hover, var(--thumbnail-color-pc, none));\n";
        $css .= "  opacity: 0;\n";
        $css .= "  mix-blend-mode: var(--thumbnail-color-blend-mode-pc-hover, var(--thumbnail-color-blend-mode-pc, normal));\n";
        $css .= "  transition: opacity var(--thumbnail-transition-duration, 300ms) var(--thumbnail-transition-easing, ease) var(--thumbnail-transition-delay, 0ms);\n";
        $css .= "}\n";

        return $css;
    }

    /**
     * Generate button band PC styles
     */
    private function get_button_band_pc_styles() {
        $selector = '.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic';

        // Band container
        $css = "{$selector} > a .wp-block-zenblocks-button-basic-band,\n";
        $css .= "{$selector} > button .wp-block-zenblocks-button-basic-band {\n";
        $css .= "  width: var(--band-frame-width-pc, 100%) !important;\n";
        $css .= "  height: var(--band-frame-height-pc, 100%) !important;\n";
        $css .= "  border-radius: var(--band-radius-pc, 0);\n";
        $css .= "  box-sizing: var(--band-box-sizing-pc, border-box);\n";
        $css .= "  border-width: var(--band-border-width-pc, 0);\n";
        $css .= "  border-style: var(--band-border-style-pc, none);\n";
        $css .= "  border-color: var(--band-border-color-pc, transparent);\n";
        $css .= "  left: var(--band-left-pc, 0);\n";
        $css .= "  right: var(--band-right-pc, auto);\n";
        $css .= "  top: var(--band-top-pc, 0);\n";
        $css .= "  bottom: var(--band-bottom-pc, auto);\n";
        $css .= "  transform: translateX(var(--band-transform-x-pc, 0)) translateY(var(--band-transform-y-pc, 0)) skewX(var(--band-skew-x-pc, 0deg)) skewY(var(--band-skew-y-pc, 0deg));\n";
        $css .= "  opacity: var(--band-opacity-pc, 1);\n";
        $css .= "  mix-blend-mode: var(--band-blend-mode-pc, normal);\n";
        $css .= "  transition: all var(--band-transition-duration, 300ms) var(--band-transition-easing, ease) var(--band-transition-delay, 0ms);\n";
        $css .= "}\n";

        // Band Image - Default State (CSS variable switching for hover)
        $css .= "{$selector} > a .wp-block-zenblocks-button-basic-band .wp-block-zenblocks-button-basic-band-image.default,\n";
        $css .= "{$selector} > button .wp-block-zenblocks-button-basic-band .wp-block-zenblocks-button-basic-band-image.default {\n";
        $css .= "  background-color: var(--band-image-base-color-pc, transparent);\n";
        $css .= "  background-repeat: var(--band-repeat-pc, no-repeat), no-repeat;\n";
        $css .= "  background-image: var(--band-image-pc, none), var(--band-base-gradient-pc, none);\n";
        $css .= "  background-position: var(--band-position-pc, 50% 50%), center;\n";
        $css .= "  background-size: var(--band-size-pc, cover), cover;\n";
        $css .= "  opacity: var(--band-image-opacity-pc, 1);\n";
        $css .= "  transition: all var(--band-transition-duration, 300ms) var(--band-transition-easing, ease) var(--band-transition-delay, 0ms) !important;\n";
        $css .= "}\n";

        // Band Color - Default State (Crossfade: visible by default, fades out on hover)
        $css .= "{$selector} > a .wp-block-zenblocks-button-basic-band .wp-block-zenblocks-button-basic-band-color.default,\n";
        $css .= "{$selector} > button .wp-block-zenblocks-button-basic-band .wp-block-zenblocks-button-basic-band-color.default {\n";
        $css .= "  background-color: transparent;\n";
        $css .= "  background-image: var(--band-color-pc, none);\n";
        $css .= "  opacity: var(--band-color-opacity-pc, 1);\n";
        $css .= "  mix-blend-mode: var(--band-color-blend-mode-pc, normal);\n";
        $css .= "  transition: opacity var(--band-transition-duration, 300ms) var(--band-transition-easing, ease) var(--band-transition-delay, 0ms);\n";
        $css .= "}\n";

        // Band Color - Hover State (Crossfade: hidden by default, fades in on hover)
        $css .= "{$selector} > a .wp-block-zenblocks-button-basic-band .wp-block-zenblocks-button-basic-band-color.hover,\n";
        $css .= "{$selector} > button .wp-block-zenblocks-button-basic-band .wp-block-zenblocks-button-basic-band-color.hover {\n";
        $css .= "  background-color: transparent;\n";
        $css .= "  background-image: var(--band-color-pc-hover, var(--band-color-pc, none));\n";
        $css .= "  opacity: 0;\n";
        $css .= "  mix-blend-mode: var(--band-color-blend-mode-pc-hover, var(--band-color-blend-mode-pc, normal));\n";
        $css .= "  transition: opacity var(--band-transition-duration, 300ms) var(--band-transition-easing, ease) var(--band-transition-delay, 0ms);\n";
        $css .= "}\n";

        return $css;
    }

    /**
     * Generate button copy PC styles
     */
    private function get_button_copy_pc_styles() {
        $selector = '.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic';

        $css = "{$selector} .wp-block-zenblocks-button-basic-copy-micro {\n";
        $css .= "  font-size: var(--copy-micro-font-size-pc, 16px);\n";
        $css .= "  font-weight: var(--copy-micro-font-weight-pc, normal);\n";
        $css .= "  letter-spacing: var(--copy-micro-letter-spacing-pc, 0);\n";
        $css .= "  margin-top: var(--copy-micro-margin-top-pc, 0);\n";
        $css .= "  margin-right: var(--copy-micro-margin-right-pc, auto);\n";
        $css .= "  margin-bottom: var(--copy-micro-margin-bottom-pc, 8px);\n";
        $css .= "  margin-left: var(--copy-micro-margin-left-pc, auto);\n";
        $css .= "}\n";
        
        $css .= "{$selector} .wp-block-zenblocks-button-basic-copy-micro-contents {\n";
        $css .= "  padding-top: var(--copy-micro-padding-top-pc, 0);\n";
        $css .= "  padding-right: var(--copy-micro-padding-right-pc, 0);\n";
        $css .= "  padding-bottom: var(--copy-micro-padding-bottom-pc, 0);\n";
        $css .= "  padding-left: var(--copy-micro-padding-left-pc, 0);\n";
        $css .= "}\n";
        
        $css .= "{$selector} .wp-block-zenblocks-button-basic-copy-sub {\n";
        $css .= "  font-size: var(--copy-sub-font-size-pc, 14px);\n";
        $css .= "  font-weight: var(--copy-sub-font-weight-pc, normal);\n";
        $css .= "  letter-spacing: var(--copy-sub-letter-spacing-pc, 0);\n";
        $css .= "  margin-top: var(--copy-sub-margin-top-pc, 8px);\n";
        $css .= "  margin-right: var(--copy-sub-margin-right-pc, auto);\n";
        $css .= "  margin-bottom: var(--copy-sub-margin-bottom-pc, 0);\n";
        $css .= "  margin-left: var(--copy-sub-margin-left-pc, auto);\n";
        $css .= "}\n";
        
        $css .= "{$selector} .wp-block-zenblocks-button-basic-copy-sub-contents {\n";
        $css .= "  padding-top: var(--copy-sub-padding-top-pc, 0);\n";
        $css .= "  padding-right: var(--copy-sub-padding-right-pc, 0);\n";
        $css .= "  padding-bottom: var(--copy-sub-padding-bottom-pc, 0);\n";
        $css .= "  padding-left: var(--copy-sub-padding-left-pc, 0);\n";
        $css .= "}\n";
        
        return $css;
    }
    
    /**
     * Generate button hover PC styles
     */
    private function get_button_hover_pc_styles() {
        $selector = '.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic';
        
        $css = "{$selector} > a:hover,\n{$selector} > button:hover {\n";
        $css .= "  border-width: var(--styling-border-width-pc-hover, var(--styling-border-width-pc, 0)) !important;\n";
        $css .= "  border-style: var(--styling-border-style-pc-hover, var(--styling-border-style-pc, none)) !important;\n";
        $css .= "  border-color: var(--styling-border-color-pc-hover, var(--styling-border-color-pc, transparent)) !important;\n";
        // 外側の角丸 = 設定値 + ボーダー幅（内側の角丸がユーザーの期待値になるように調整）
        $css .= "  border-top-left-radius: calc(var(--styling-radius-top-left-pc-hover, var(--styling-radius-top-left-pc, 0px)) + var(--styling-border-width-pc-hover, var(--styling-border-width-pc, 0px))) !important;\n";
        $css .= "  border-top-right-radius: calc(var(--styling-radius-top-right-pc-hover, var(--styling-radius-top-right-pc, 0px)) + var(--styling-border-width-pc-hover, var(--styling-border-width-pc, 0px))) !important;\n";
        $css .= "  border-bottom-right-radius: calc(var(--styling-radius-bottom-right-pc-hover, var(--styling-radius-bottom-right-pc, 0px)) + var(--styling-border-width-pc-hover, var(--styling-border-width-pc, 0px))) !important;\n";
        $css .= "  border-bottom-left-radius: calc(var(--styling-radius-bottom-left-pc-hover, var(--styling-radius-bottom-left-pc, 0px)) + var(--styling-border-width-pc-hover, var(--styling-border-width-pc, 0px))) !important;\n";
        $css .= "  box-shadow: var(--styling-shadow-pc-hover, var(--styling-shadow-pc, none)) !important;\n";
        $css .= "  opacity: var(--styling-opacity-pc-hover, var(--styling-opacity-pc, 1)) !important;\n";
        $css .= "  mix-blend-mode: var(--styling-mix-blend-mode-pc-hover, var(--styling-mix-blend-mode-pc, normal)) !important;\n";
        $css .= "}\n";
        
        // Inner shadow hover overlay (::after pseudo-element)
        // ボタン本体の外側角丸 = 設定値 + ボーダー幅 なので、ボーダー内側の角丸 = 設定値
        // ::afterはボーダー内側に配置されるため、角丸は設定値をそのまま使用
        $css .= "{$selector} > a:hover::after,\n{$selector} > button:hover::after {\n";
        $css .= "  border-top-left-radius: var(--styling-radius-top-left-pc-hover, var(--styling-radius-top-left-pc, 0px)) !important;\n";
        $css .= "  border-top-right-radius: var(--styling-radius-top-right-pc-hover, var(--styling-radius-top-right-pc, 0px)) !important;\n";
        $css .= "  border-bottom-right-radius: var(--styling-radius-bottom-right-pc-hover, var(--styling-radius-bottom-right-pc, 0px)) !important;\n";
        $css .= "  border-bottom-left-radius: var(--styling-radius-bottom-left-pc-hover, var(--styling-radius-bottom-left-pc, 0px)) !important;\n";
        $css .= "  box-shadow: var(--styling-inner-shadow-pc-hover, var(--styling-inner-shadow-pc, none)) !important;\n";
        $css .= "}\n";

        // Frame animation container hover (inner border-radius = outer radius - border width)
        $css .= "{$selector} > a:hover .wp-block-zenblocks-button-basic-frame,\n{$selector} > button:hover .wp-block-zenblocks-button-basic-frame {\n";
        $css .= "  border-top-left-radius: max(0px, calc(var(--styling-radius-top-left-pc-hover, var(--styling-radius-top-left-pc, 0px)) - var(--styling-border-width-pc-hover, var(--styling-border-width-pc, 0px)))) !important;\n";
        $css .= "  border-top-right-radius: max(0px, calc(var(--styling-radius-top-right-pc-hover, var(--styling-radius-top-right-pc, 0px)) - var(--styling-border-width-pc-hover, var(--styling-border-width-pc, 0px)))) !important;\n";
        $css .= "  border-bottom-right-radius: max(0px, calc(var(--styling-radius-bottom-right-pc-hover, var(--styling-radius-bottom-right-pc, 0px)) - var(--styling-border-width-pc-hover, var(--styling-border-width-pc, 0px)))) !important;\n";
        $css .= "  border-bottom-left-radius: max(0px, calc(var(--styling-radius-bottom-left-pc-hover, var(--styling-radius-bottom-left-pc, 0px)) - var(--styling-border-width-pc-hover, var(--styling-border-width-pc, 0px)))) !important;\n";
        $css .= "}\n";

        // Background Overlay - crossfade (hide default, show hover)
        $css .= "{$selector}{$selector} > a:hover .wp-block-zenblocks-button-basic-bg-overlay.default,\n";
        $css .= "{$selector}{$selector} > button:hover .wp-block-zenblocks-button-basic-bg-overlay.default {\n";
        $css .= "  opacity: 0 !important;\n";
        $css .= "}\n";

        $css .= "{$selector}{$selector} > a:hover .wp-block-zenblocks-button-basic-bg-overlay.hover,\n";
        $css .= "{$selector}{$selector} > button:hover .wp-block-zenblocks-button-basic-bg-overlay.hover {\n";
        $css .= "  opacity: var(--background-color-opacity-pc-hover, var(--background-color-opacity-pc, 1)) !important;\n";
        $css .= "}\n";

        // Background Base Color - hover (color/gradient change)
        $css .= "{$selector}{$selector} > a:hover .wp-block-zenblocks-button-basic-bg-base-color.default,\n";
        $css .= "{$selector}{$selector} > button:hover .wp-block-zenblocks-button-basic-bg-base-color.default {\n";
        $css .= "  background-color: var(--background-base-color-pc-hover, var(--background-base-color-pc, transparent)) !important;\n";
        $css .= "  background-image: var(--background-base-gradient-pc-hover, var(--background-base-gradient-pc, none)) !important;\n";
        $css .= "}\n";

        // Background Image - hover (position/size/repeat)
        $css .= "{$selector}{$selector} > a:hover .wp-block-zenblocks-button-basic-bg-image.default,\n";
        $css .= "{$selector}{$selector} > button:hover .wp-block-zenblocks-button-basic-bg-image.default {\n";
        $css .= "  background-image: var(--background-image-pc-hover, var(--background-image-pc, none)) !important;\n";
        $css .= "  background-position: var(--background-position-pc-hover, var(--background-position-pc, center)) !important;\n";
        $css .= "  background-size: var(--background-size-pc-hover, var(--background-size-pc, cover)) !important;\n";
        $css .= "  background-repeat: var(--background-repeat-pc-hover, var(--background-repeat-pc, no-repeat)) !important;\n";
        $css .= "}\n";

        // Background Pattern - CSS variable switching (opacity change on hover)
        $css .= "{$selector}{$selector} > a:hover .wp-block-zenblocks-button-basic-bg-pattern.default,\n";
        $css .= "{$selector}{$selector} > button:hover .wp-block-zenblocks-button-basic-bg-pattern.default {\n";
        $css .= "  opacity: var(--background-pattern-opacity-pc-hover, var(--background-pattern-opacity-pc, 0.5)) !important;\n";
        $css .= "}\n";

        // Background Pattern styles for PC - Hover (color/size change)
        $css .= $this->get_pattern_styles_pc_hover();

        // Icon hover styles - アニメーションなしの場合（PC）
        // SCSSと同じ詳細度にするため :not([class*="..."]) を追加
        $css .= "{$selector}{$selector}:not([class*=\"zenblocks-button-hover-animation-icon-\"]) > a:hover .wp-block-zenblocks-button-basic-icon,\n";
        $css .= "{$selector}{$selector}:not([class*=\"zenblocks-button-hover-animation-icon-\"]) > button:hover .wp-block-zenblocks-button-basic-icon {\n";
        $css .= "  width: var(--icon-size-pc-hover, var(--icon-size-pc, 25px)) !important;\n";
        $css .= "  height: var(--icon-size-pc-hover, var(--icon-size-pc, 25px)) !important;\n";
        $css .= "  left: var(--icon-left-pc-hover, var(--icon-left-pc, 50%)) !important;\n";
        $css .= "  right: var(--icon-right-pc-hover, var(--icon-right-pc, auto)) !important;\n";
        $css .= "  top: var(--icon-top-pc-hover, var(--icon-top-pc, 50%)) !important;\n";
        $css .= "  bottom: var(--icon-bottom-pc-hover, var(--icon-bottom-pc, auto)) !important;\n";
        $css .= "  transform: translateX(var(--icon-transform-x-pc-hover, var(--icon-transform-x-pc, -50%))) translateY(var(--icon-transform-y-pc-hover, var(--icon-transform-y-pc, -50%))) !important;\n";
        $css .= "}\n";

        // Icon hover styles - アニメーションありの場合（PC）
        $css .= "{$selector}{$selector}[class*=\"zenblocks-button-hover-animation-icon-\"] > a:hover .wp-block-zenblocks-button-basic-icon,\n";
        $css .= "{$selector}{$selector}[class*=\"zenblocks-button-hover-animation-icon-\"] > button:hover .wp-block-zenblocks-button-basic-icon {\n";
        $css .= "  width: var(--icon-size-pc-hover, var(--icon-size-pc, 25px)) !important;\n";
        $css .= "  height: var(--icon-size-pc-hover, var(--icon-size-pc, 25px)) !important;\n";
        $css .= "  left: var(--icon-left-pc-hover, var(--icon-left-pc, 50%)) !important;\n";
        $css .= "  right: var(--icon-right-pc-hover, var(--icon-right-pc, auto)) !important;\n";
        $css .= "  top: var(--icon-top-pc-hover, var(--icon-top-pc, 50%)) !important;\n";
        $css .= "  bottom: var(--icon-bottom-pc-hover, var(--icon-bottom-pc, auto)) !important;\n";
        $css .= "  transform: translateX(var(--icon-transform-x-pc-hover, var(--icon-transform-x-pc, -50%))) translateY(var(--icon-transform-y-pc-hover, var(--icon-transform-y-pc, -50%))) !important;\n";
        $css .= "}\n";

        // Icon frame hover styles - アニメーションなしの場合（PC）
        $css .= "{$selector}{$selector}:not([class*=\"zenblocks-button-hover-animation-icon-\"]) > a:hover .wp-block-zenblocks-button-basic-icon.wrap_icon:before,\n";
        $css .= "{$selector}{$selector}:not([class*=\"zenblocks-button-hover-animation-icon-\"]) > button:hover .wp-block-zenblocks-button-basic-icon.wrap_icon:before {\n";
        $css .= "  width: var(--icon-frame-width-pc-hover, var(--icon-frame-width-pc, 40px));\n";
        $css .= "  height: var(--icon-frame-height-pc-hover, var(--icon-frame-height-pc, 40px));\n";
        $css .= "  border-radius: var(--icon-frame-radius-pc-hover, var(--icon-frame-radius-pc, 0));\n";
        $css .= "  border-top-width: var(--icon-frame-border-top-width-pc-hover, var(--icon-frame-border-top-width-pc, 0));\n";
        $css .= "  border-right-width: var(--icon-frame-border-right-width-pc-hover, var(--icon-frame-border-right-width-pc, 0));\n";
        $css .= "  border-bottom-width: var(--icon-frame-border-bottom-width-pc-hover, var(--icon-frame-border-bottom-width-pc, 0));\n";
        $css .= "  border-left-width: var(--icon-frame-border-left-width-pc-hover, var(--icon-frame-border-left-width-pc, 0));\n";
        $css .= "  border-color: var(--icon-frame-border-color-pc-hover, var(--icon-frame-border-color-pc, transparent));\n";
        $css .= "  border-style: var(--icon-frame-border-style-pc-hover, var(--icon-frame-border-style-pc, solid));\n";
        $css .= "  background: var(--icon-frame-bg-color-pc-hover, var(--icon-frame-bg-color-pc, transparent));\n";
        $css .= "}\n";

        // Icon frame hover styles - アニメーションありの場合（PC）
        $css .= "{$selector}{$selector}[class*=\"zenblocks-button-hover-animation-icon-\"] > a:hover .wp-block-zenblocks-button-basic-icon.wrap_icon:before,\n";
        $css .= "{$selector}{$selector}[class*=\"zenblocks-button-hover-animation-icon-\"] > button:hover .wp-block-zenblocks-button-basic-icon.wrap_icon:before {\n";
        $css .= "  width: var(--icon-frame-width-pc-hover, var(--icon-frame-width-pc, 40px));\n";
        $css .= "  height: var(--icon-frame-height-pc-hover, var(--icon-frame-height-pc, 40px));\n";
        $css .= "  border-radius: var(--icon-frame-radius-pc-hover, var(--icon-frame-radius-pc, 0));\n";
        $css .= "  border-top-width: var(--icon-frame-border-top-width-pc-hover, var(--icon-frame-border-top-width-pc, 0));\n";
        $css .= "  border-right-width: var(--icon-frame-border-right-width-pc-hover, var(--icon-frame-border-right-width-pc, 0));\n";
        $css .= "  border-bottom-width: var(--icon-frame-border-bottom-width-pc-hover, var(--icon-frame-border-bottom-width-pc, 0));\n";
        $css .= "  border-left-width: var(--icon-frame-border-left-width-pc-hover, var(--icon-frame-border-left-width-pc, 0));\n";
        $css .= "  border-color: var(--icon-frame-border-color-pc-hover, var(--icon-frame-border-color-pc, transparent));\n";
        $css .= "  border-style: var(--icon-frame-border-style-pc-hover, var(--icon-frame-border-style-pc, solid));\n";
        $css .= "  background: var(--icon-frame-bg-color-pc-hover, var(--icon-frame-bg-color-pc, transparent));\n";
        $css .= "}\n";

        // Thumbnail Hover - CSS variable switching (frame properties transition)
        $css .= "{$selector} > a:hover .wp-block-zenblocks-button-basic-thumbnail,\n";
        $css .= "{$selector} > button:hover .wp-block-zenblocks-button-basic-thumbnail {\n";
        $css .= "  width: var(--thumbnail-frame-width-pc-hover, var(--thumbnail-frame-width-pc, 60px)) !important;\n";
        $css .= "  height: var(--thumbnail-frame-height-pc-hover, var(--thumbnail-frame-height-pc, 60px)) !important;\n";
        $css .= "  border-radius: var(--thumbnail-radius-pc-hover, var(--thumbnail-radius-pc, 0));\n";
        $css .= "  box-sizing: var(--thumbnail-box-sizing-pc-hover, var(--thumbnail-box-sizing-pc, border-box));\n";
        $css .= "  border-width: var(--thumbnail-border-width-pc-hover, var(--thumbnail-border-width-pc, 0));\n";
        $css .= "  border-style: var(--thumbnail-border-style-pc-hover, var(--thumbnail-border-style-pc, none));\n";
        $css .= "  border-color: var(--thumbnail-border-color-pc-hover, var(--thumbnail-border-color-pc, transparent));\n";
        $css .= "  left: var(--thumbnail-left-pc-hover, var(--thumbnail-left-pc, 0));\n";
        $css .= "  right: var(--thumbnail-right-pc-hover, var(--thumbnail-right-pc, auto));\n";
        $css .= "  top: var(--thumbnail-top-pc-hover, var(--thumbnail-top-pc, 0));\n";
        $css .= "  bottom: var(--thumbnail-bottom-pc-hover, var(--thumbnail-bottom-pc, auto));\n";
        $css .= "  transform: translateX(var(--thumbnail-transform-x-pc-hover, var(--thumbnail-transform-x-pc, 0))) translateY(var(--thumbnail-transform-y-pc-hover, var(--thumbnail-transform-y-pc, 0)));\n";
        $css .= "  opacity: var(--thumbnail-opacity-pc-hover, var(--thumbnail-opacity-pc, 1));\n";
        $css .= "  mix-blend-mode: var(--thumbnail-blend-mode-pc-hover, var(--thumbnail-blend-mode-pc, normal));\n";
        $css .= "}\n";

        // Thumbnail Image Hover - CSS variable switching on .default element
        // Using doubled selector for higher specificity
        $css .= "{$selector}{$selector} > a:hover .wp-block-zenblocks-button-basic-thumbnail .wp-block-zenblocks-button-basic-thumbnail-image.default,\n";
        $css .= "{$selector}{$selector} > button:hover .wp-block-zenblocks-button-basic-thumbnail .wp-block-zenblocks-button-basic-thumbnail-image.default {\n";
        $css .= "  background-color: var(--thumbnail-image-base-color-pc-hover, var(--thumbnail-image-base-color-pc, transparent)) !important;\n";
        $css .= "  background-repeat: var(--thumbnail-repeat-pc-hover, var(--thumbnail-repeat-pc, no-repeat)) !important;\n";
        $css .= "  background-position: var(--thumbnail-position-pc-hover, var(--thumbnail-position-pc, 50% 50%)) !important;\n";
        $css .= "  background-size: var(--thumbnail-size-pc-hover, var(--thumbnail-size-pc, cover)) !important;\n";
        $css .= "}\n";

        // Thumbnail Overlay Hover - Crossfade (hide default, show hover)
        // Using doubled selector for higher specificity
        $css .= "{$selector}{$selector} > a:hover .wp-block-zenblocks-button-basic-thumbnail .wp-block-zenblocks-button-basic-thumbnail-overlay.default,\n";
        $css .= "{$selector}{$selector} > button:hover .wp-block-zenblocks-button-basic-thumbnail .wp-block-zenblocks-button-basic-thumbnail-overlay.default {\n";
        $css .= "  opacity: 0 !important;\n";
        $css .= "}\n";
        $css .= "{$selector}{$selector} > a:hover .wp-block-zenblocks-button-basic-thumbnail .wp-block-zenblocks-button-basic-thumbnail-overlay.hover,\n";
        $css .= "{$selector}{$selector} > button:hover .wp-block-zenblocks-button-basic-thumbnail .wp-block-zenblocks-button-basic-thumbnail-overlay.hover {\n";
        $css .= "  opacity: var(--thumbnail-color-opacity-pc-hover, var(--thumbnail-color-opacity-pc, 1)) !important;\n";
        $css .= "}\n";

        // Band Hover - CSS variable switching (frame properties transition)
        // Using doubled selector (4x) for higher specificity to match SCSS hover
        $css .= "{$selector}{$selector} > a:hover .wp-block-zenblocks-button-basic-band,\n";
        $css .= "{$selector}{$selector} > button:hover .wp-block-zenblocks-button-basic-band {\n";
        $css .= "  width: var(--band-frame-width-pc-hover, var(--band-frame-width-pc, 100%)) !important;\n";
        $css .= "  height: var(--band-frame-height-pc-hover, var(--band-frame-height-pc, 100%)) !important;\n";
        $css .= "  border-radius: var(--band-radius-pc-hover, var(--band-radius-pc, 0));\n";
        $css .= "  box-sizing: var(--band-box-sizing-pc-hover, var(--band-box-sizing-pc, border-box));\n";
        $css .= "  border-width: var(--band-border-width-pc-hover, var(--band-border-width-pc, 0));\n";
        $css .= "  border-style: var(--band-border-style-pc-hover, var(--band-border-style-pc, none));\n";
        $css .= "  border-color: var(--band-border-color-pc-hover, var(--band-border-color-pc, transparent));\n";
        $css .= "  left: var(--band-left-pc-hover, var(--band-left-pc, 0));\n";
        $css .= "  right: var(--band-right-pc-hover, var(--band-right-pc, auto));\n";
        $css .= "  top: var(--band-top-pc-hover, var(--band-top-pc, 0));\n";
        $css .= "  bottom: var(--band-bottom-pc-hover, var(--band-bottom-pc, auto));\n";
        $css .= "  transform: translateX(var(--band-transform-x-pc-hover, var(--band-transform-x-pc, 0))) translateY(var(--band-transform-y-pc-hover, var(--band-transform-y-pc, 0))) skewX(var(--band-skew-x-pc-hover, var(--band-skew-x-pc, 0deg))) skewY(var(--band-skew-y-pc-hover, var(--band-skew-y-pc, 0deg)));\n";
        $css .= "  opacity: var(--band-opacity-pc-hover, var(--band-opacity-pc, 1));\n";
        $css .= "  mix-blend-mode: var(--band-blend-mode-pc-hover, var(--band-blend-mode-pc, normal));\n";
        $css .= "}\n";

        // Band Image Hover - CSS variable switching on .default element
        // Using doubled selector for higher specificity
        $css .= "{$selector}{$selector} > a:hover .wp-block-zenblocks-button-basic-band .wp-block-zenblocks-button-basic-band-image.default,\n";
        $css .= "{$selector}{$selector} > button:hover .wp-block-zenblocks-button-basic-band .wp-block-zenblocks-button-basic-band-image.default {\n";
        $css .= "  background-color: var(--band-image-base-color-pc-hover, var(--band-image-base-color-pc, transparent)) !important;\n";
        $css .= "  background-repeat: var(--band-repeat-pc-hover, var(--band-repeat-pc, no-repeat)), no-repeat !important;\n";
        $css .= "  background-image: var(--band-image-pc-hover, var(--band-image-pc, none)), var(--band-base-gradient-pc-hover, var(--band-base-gradient-pc, none)) !important;\n";
        $css .= "  background-position: var(--band-position-pc-hover, var(--band-position-pc, 50% 50%)), center !important;\n";
        $css .= "  background-size: var(--band-size-pc-hover, var(--band-size-pc, cover)), cover !important;\n";
        $css .= "  opacity: var(--band-image-opacity-pc-hover, var(--band-image-opacity-pc, 1)) !important;\n";
        $css .= "}\n";

        // Band Color Hover - Crossfade (hide default, show hover)
        // Using doubled selector for higher specificity
        $css .= "{$selector}{$selector} > a:hover .wp-block-zenblocks-button-basic-band .wp-block-zenblocks-button-basic-band-color.default,\n";
        $css .= "{$selector}{$selector} > button:hover .wp-block-zenblocks-button-basic-band .wp-block-zenblocks-button-basic-band-color.default {\n";
        $css .= "  opacity: 0 !important;\n";
        $css .= "}\n";
        $css .= "{$selector}{$selector} > a:hover .wp-block-zenblocks-button-basic-band .wp-block-zenblocks-button-basic-band-color.hover,\n";
        $css .= "{$selector}{$selector} > button:hover .wp-block-zenblocks-button-basic-band .wp-block-zenblocks-button-basic-band-color.hover {\n";
        $css .= "  opacity: var(--band-color-opacity-pc-hover, var(--band-color-opacity-pc, 1)) !important;\n";
        $css .= "}\n";

        // Band Pattern Hover - CSS variable switching (opacity change on hover)
        $css .= "{$selector}{$selector} > a:hover .wp-block-zenblocks-button-basic-band .wp-block-zenblocks-button-basic-band-pattern.default,\n";
        $css .= "{$selector}{$selector} > button:hover .wp-block-zenblocks-button-basic-band .wp-block-zenblocks-button-basic-band-pattern.default {\n";
        $css .= "  opacity: var(--band-pattern-opacity-pc-hover, var(--band-pattern-opacity-pc, 0.5)) !important;\n";
        $css .= "}\n";

        // Band Pattern styles for PC - Hover (color/size change)
        $css .= $this->get_band_pattern_styles_pc_hover();

        return $css;
    }
    
    /**
     * Generate text basic PC styles (base styles without media query)
     */
    private function get_text_basic_pc_styles() {
        return "";
    }
    
    /**
     * Generate button basic responsive styles
     */
    private function get_button_basic_styles($bp, $has_md = true, $has_tb = true) {
        $selector = '.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic';
        $fallback = $this->get_fallback_chain($bp, $has_md, $has_tb);
        
        $css = "  /* Button Basic - {$bp} */\n";
        
        $css .= "  {$selector} {\n";
        $css .= "    width: var(--layout-width-{$bp}{$fallback['width']}) !important;\n";
        $css .= "    min-width: var(--layout-width-min-{$bp}{$fallback['width-min']}) !important;\n";
        $css .= "    max-width: var(--layout-width-max-{$bp}{$fallback['width-max']}) !important;\n";
        $css .= "    margin-top: var(--spacing-margin-top-{$bp}{$fallback['margin']}) !important;\n";
        $css .= "    margin-right: var(--spacing-margin-right-{$bp}{$fallback['margin-right']}) !important;\n";
        $css .= "    margin-bottom: var(--spacing-margin-bottom-{$bp}{$fallback['margin-bottom']}) !important;\n";
        $css .= "    margin-left: var(--spacing-margin-left-{$bp}{$fallback['margin-left']}) !important;\n";
        $css .= "  }\n";

        // Custom position styles (only when .is-custom-position-{bp} class is present)
        $css .= "  {$selector}.is-custom-position-{$bp} {\n";
        $css .= "    position: var(--layout-position-type-{$bp}{$fallback['position']}) !important;\n";
        $css .= "    top: var(--layout-position-top-{$bp}{$fallback['position-top']}) !important;\n";
        $css .= "    right: var(--layout-position-right-{$bp}{$fallback['position-right']}) !important;\n";
        $css .= "    bottom: var(--layout-position-bottom-{$bp}{$fallback['position-bottom']}) !important;\n";
        $css .= "    left: var(--layout-position-left-{$bp}{$fallback['position-left']}) !important;\n";
        $css .= "    z-index: var(--layout-z-index-{$bp}{$fallback['z-index']}) !important;\n";
        $css .= "    transform: translate(var(--layout-transform-translate-x-{$bp}{$fallback['transform-x']}), var(--layout-transform-translate-y-{$bp}{$fallback['transform-y']})) !important;\n";
        $css .= "  }\n";
        
        $css .= "  {$selector} > a,\n  {$selector} > button {\n";
        $css .= "    font-size: var(--font-size-{$bp}{$fallback['font-size']}) !important;\n";
        $css .= "    padding-top: var(--spacing-padding-top-{$bp}{$fallback['padding']}) !important;\n";
        $css .= "    padding-right: var(--spacing-padding-right-{$bp}{$fallback['padding-right']}) !important;\n";
        $css .= "    padding-bottom: var(--spacing-padding-bottom-{$bp}{$fallback['padding-bottom']}) !important;\n";
        $css .= "    padding-left: var(--spacing-padding-left-{$bp}{$fallback['padding-left']}) !important;\n";
        $css .= "    height: var(--layout-height-{$bp}{$fallback['height']}) !important;\n";
        $css .= "    min-height: var(--layout-height-min-{$bp}{$fallback['height-min']}) !important;\n";
        $css .= "    max-height: var(--layout-height-max-{$bp}{$fallback['height-max']}) !important;\n";
        $css .= "    border-width: var(--styling-border-width-{$bp}{$fallback['border']}) !important;\n";
        $css .= "    border-style: var(--styling-border-style-{$bp}{$fallback['border-style']}) !important;\n";
        $css .= "    border-color: var(--styling-border-color-{$bp}{$fallback['border-color']}) !important;\n";
        $css .= "    box-sizing: var(--styling-box-sizing-{$bp}{$fallback['box-sizing']}) !important;\n";
        // 外側の角丸 = 設定値 + ボーダー幅（内側の角丸がユーザーの期待値になるように調整）
        $css .= "    border-top-left-radius: calc(var(--styling-radius-top-left-{$bp}{$fallback['radius-top-left']}) + var(--styling-border-width-{$bp}{$fallback['border']})) !important;\n";
        $css .= "    border-top-right-radius: calc(var(--styling-radius-top-right-{$bp}{$fallback['radius-top-right']}) + var(--styling-border-width-{$bp}{$fallback['border']})) !important;\n";
        $css .= "    border-bottom-right-radius: calc(var(--styling-radius-bottom-right-{$bp}{$fallback['radius-bottom-right']}) + var(--styling-border-width-{$bp}{$fallback['border']})) !important;\n";
        $css .= "    border-bottom-left-radius: calc(var(--styling-radius-bottom-left-{$bp}{$fallback['radius-bottom-left']}) + var(--styling-border-width-{$bp}{$fallback['border']})) !important;\n";
        $css .= "    box-shadow: var(--styling-shadow-{$bp}{$fallback['shadow']}) !important;\n";
        $css .= "    opacity: var(--styling-opacity-{$bp}{$fallback['opacity']}) !important;\n";
        $css .= "    mix-blend-mode: var(--styling-mix-blend-mode-{$bp}{$fallback['mix-blend-mode']}) !important;\n";
        $css .= "  }\n";
        
        // Inner shadow overlay (::after pseudo-element)
        // ボタン本体の外側角丸 = 設定値 + ボーダー幅 なので、ボーダー内側の角丸 = 設定値
        // ::afterはボーダー内側に配置されるため、角丸は設定値をそのまま使用
        // エディタ内ではメディアクエリを適用しない（エディタはgetPreviewStylesで制御）
        $editor_exclude = 'body:not(.block-editor-page) ';
        $css .= "  {$editor_exclude}{$selector} > a::after,\n  {$editor_exclude}{$selector} > button::after {\n";
        $css .= "    border-top-left-radius: var(--styling-radius-top-left-{$bp}{$fallback['radius-top-left']}) !important;\n";
        $css .= "    border-top-right-radius: var(--styling-radius-top-right-{$bp}{$fallback['radius-top-right']}) !important;\n";
        $css .= "    border-bottom-right-radius: var(--styling-radius-bottom-right-{$bp}{$fallback['radius-bottom-right']}) !important;\n";
        $css .= "    border-bottom-left-radius: var(--styling-radius-bottom-left-{$bp}{$fallback['radius-bottom-left']}) !important;\n";
        $css .= "    box-shadow: var(--styling-inner-shadow-{$bp}{$fallback['inner-shadow']}) !important;\n";
        $css .= "  }\n";

        // Frame animation container (inner border-radius = outer radius - border width)
        $css .= "  {$selector} > a .wp-block-zenblocks-button-basic-frame,\n  {$selector} > button .wp-block-zenblocks-button-basic-frame {\n";
        $css .= "    border-top-left-radius: max(0px, calc(var(--styling-radius-top-left-{$bp}{$fallback['radius-top-left']}) - var(--styling-border-width-{$bp}{$fallback['border']}))) !important;\n";
        $css .= "    border-top-right-radius: max(0px, calc(var(--styling-radius-top-right-{$bp}{$fallback['radius-top-right']}) - var(--styling-border-width-{$bp}{$fallback['border']}))) !important;\n";
        $css .= "    border-bottom-right-radius: max(0px, calc(var(--styling-radius-bottom-right-{$bp}{$fallback['radius-bottom-right']}) - var(--styling-border-width-{$bp}{$fallback['border']}))) !important;\n";
        $css .= "    border-bottom-left-radius: max(0px, calc(var(--styling-radius-bottom-left-{$bp}{$fallback['radius-bottom-left']}) - var(--styling-border-width-{$bp}{$fallback['border']}))) !important;\n";
        $css .= "  }\n";

        $css .= $this->get_button_text_styles($bp, $fallback);
        $css .= $this->get_button_micro_sub_text_styles($bp, $fallback);
        $css .= $this->get_button_icon_styles($bp, $fallback);
        $css .= $this->get_button_background_styles($bp, $fallback);
        $css .= $this->get_button_thumbnail_styles($bp, $fallback);
        $css .= $this->get_button_band_styles($bp, $fallback);
        $css .= $this->get_button_copy_styles($bp, $fallback);
        $css .= $this->get_button_hover_styles($bp, $fallback);
        $css .= $this->get_button_thumbnail_hover_styles($bp, $fallback);
        $css .= $this->get_button_band_hover_styles($bp, $fallback);
        
        return $css;
    }
    
    /**
     * Generate hover styles for button
     */
    private function get_button_hover_styles($bp, $fallback) {
        $selector = '.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic';
        
        $css = "  /* Hover - {$bp} */\n";
        $css .= "  {$selector} > a:hover,\n  {$selector} > button:hover {\n";
        $css .= "    border-width: var(--styling-border-width-{$bp}-hover{$fallback['border-hover']}) !important;\n";
        $css .= "    border-style: var(--styling-border-style-{$bp}-hover{$fallback['border-style-hover']}) !important;\n";
        $css .= "    border-color: var(--styling-border-color-{$bp}-hover{$fallback['border-color-hover']}) !important;\n";
        // 外側の角丸 = 設定値 + ボーダー幅（内側の角丸がユーザーの期待値になるように調整）
        $css .= "    border-top-left-radius: calc(var(--styling-radius-top-left-{$bp}-hover{$fallback['radius-top-left-hover']}) + var(--styling-border-width-{$bp}-hover{$fallback['border-hover']})) !important;\n";
        $css .= "    border-top-right-radius: calc(var(--styling-radius-top-right-{$bp}-hover{$fallback['radius-top-right-hover']}) + var(--styling-border-width-{$bp}-hover{$fallback['border-hover']})) !important;\n";
        $css .= "    border-bottom-right-radius: calc(var(--styling-radius-bottom-right-{$bp}-hover{$fallback['radius-bottom-right-hover']}) + var(--styling-border-width-{$bp}-hover{$fallback['border-hover']})) !important;\n";
        $css .= "    border-bottom-left-radius: calc(var(--styling-radius-bottom-left-{$bp}-hover{$fallback['radius-bottom-left-hover']}) + var(--styling-border-width-{$bp}-hover{$fallback['border-hover']})) !important;\n";
        $css .= "    box-shadow: var(--styling-shadow-{$bp}-hover{$fallback['shadow-hover']}) !important;\n";
        $css .= "    opacity: var(--styling-opacity-{$bp}-hover{$fallback['opacity-hover']}) !important;\n";
        $css .= "    mix-blend-mode: var(--styling-mix-blend-mode-{$bp}-hover{$fallback['mix-blend-mode-hover']}) !important;\n";
        $css .= "  }\n";
        
        // Inner shadow hover overlay (::after pseudo-element)
        // ボタン本体の外側角丸 = 設定値 + ボーダー幅 なので、ボーダー内側の角丸 = 設定値
        // ::afterはボーダー内側に配置されるため、角丸は設定値をそのまま使用
        // エディタ内ではメディアクエリを適用しない（エディタはgetPreviewStylesで制御）
        $editor_exclude = 'body:not(.block-editor-page) ';
        $css .= "  {$editor_exclude}{$selector} > a:hover::after,\n  {$editor_exclude}{$selector} > button:hover::after {\n";
        $css .= "    border-top-left-radius: var(--styling-radius-top-left-{$bp}-hover{$fallback['radius-top-left-hover']}) !important;\n";
        $css .= "    border-top-right-radius: var(--styling-radius-top-right-{$bp}-hover{$fallback['radius-top-right-hover']}) !important;\n";
        $css .= "    border-bottom-right-radius: var(--styling-radius-bottom-right-{$bp}-hover{$fallback['radius-bottom-right-hover']}) !important;\n";
        $css .= "    border-bottom-left-radius: var(--styling-radius-bottom-left-{$bp}-hover{$fallback['radius-bottom-left-hover']}) !important;\n";
        $css .= "    box-shadow: var(--styling-inner-shadow-{$bp}-hover{$fallback['inner-shadow-hover']}) !important;\n";
        $css .= "  }\n";

        // Frame animation container hover (inner border-radius = outer radius - border width)
        $css .= "  {$selector} > a:hover .wp-block-zenblocks-button-basic-frame,\n  {$selector} > button:hover .wp-block-zenblocks-button-basic-frame {\n";
        $css .= "    border-top-left-radius: max(0px, calc(var(--styling-radius-top-left-{$bp}-hover{$fallback['radius-top-left-hover']}) - var(--styling-border-width-{$bp}-hover{$fallback['border-hover']}))) !important;\n";
        $css .= "    border-top-right-radius: max(0px, calc(var(--styling-radius-top-right-{$bp}-hover{$fallback['radius-top-right-hover']}) - var(--styling-border-width-{$bp}-hover{$fallback['border-hover']}))) !important;\n";
        $css .= "    border-bottom-right-radius: max(0px, calc(var(--styling-radius-bottom-right-{$bp}-hover{$fallback['radius-bottom-right-hover']}) - var(--styling-border-width-{$bp}-hover{$fallback['border-hover']}))) !important;\n";
        $css .= "    border-bottom-left-radius: max(0px, calc(var(--styling-radius-bottom-left-{$bp}-hover{$fallback['radius-bottom-left-hover']}) - var(--styling-border-width-{$bp}-hover{$fallback['border-hover']}))) !important;\n";
        $css .= "  }\n";

        // Background Overlay - crossfade (hide default, show hover)
        $css .= "  {$selector}{$selector} > a:hover .wp-block-zenblocks-button-basic-bg-overlay.default,\n";
        $css .= "  {$selector}{$selector} > button:hover .wp-block-zenblocks-button-basic-bg-overlay.default {\n";
        $css .= "    opacity: 0 !important;\n";
        $css .= "  }\n";

        $css .= "  {$selector}{$selector} > a:hover .wp-block-zenblocks-button-basic-bg-overlay.hover,\n";
        $css .= "  {$selector}{$selector} > button:hover .wp-block-zenblocks-button-basic-bg-overlay.hover {\n";
        $css .= "    opacity: var(--background-color-opacity-{$bp}-hover{$fallback['bg-color-opacity-hover']}) !important;\n";
        $css .= "  }\n";

        // Background Base Color - hover (color/gradient change)
        $css .= "  {$selector}{$selector} > a:hover .wp-block-zenblocks-button-basic-bg-base-color.default,\n";
        $css .= "  {$selector}{$selector} > button:hover .wp-block-zenblocks-button-basic-bg-base-color.default {\n";
        $css .= "    background-color: var(--background-base-color-{$bp}-hover{$fallback['bg-base-color-hover']}) !important;\n";
        $css .= "    background-image: var(--background-base-gradient-{$bp}-hover{$fallback['bg-base-gradient-hover']}) !important;\n";
        $css .= "  }\n";

        // Background Image - hover (position/size/repeat)
        $css .= "  {$selector}{$selector} > a:hover .wp-block-zenblocks-button-basic-bg-image.default,\n";
        $css .= "  {$selector}{$selector} > button:hover .wp-block-zenblocks-button-basic-bg-image.default {\n";
        $css .= "    background-image: var(--background-image-{$bp}-hover{$fallback['bg-image-hover']}) !important;\n";
        $css .= "    background-position: var(--background-position-{$bp}-hover{$fallback['bg-position-hover']}) !important;\n";
        $css .= "    background-size: var(--background-size-{$bp}-hover{$fallback['bg-size-hover']}) !important;\n";
        $css .= "    background-repeat: var(--background-repeat-{$bp}-hover{$fallback['bg-repeat-hover']}) !important;\n";
        $css .= "  }\n";

        // Background Pattern - CSS variable switching (opacity change on hover)
        $css .= "  {$selector}{$selector} > a:hover .wp-block-zenblocks-button-basic-bg-pattern.default,\n";
        $css .= "  {$selector}{$selector} > button:hover .wp-block-zenblocks-button-basic-bg-pattern.default {\n";
        $css .= "    opacity: var(--background-pattern-opacity-{$bp}-hover{$fallback['bg-pattern-opacity-hover']}) !important;\n";
        $css .= "  }\n";

        // Background Pattern styles for this breakpoint - Hover (color/size change)
        $css .= $this->get_pattern_styles_hover($bp, $fallback);

        // Icon hover styles - アニメーションなしの場合
        // SCSSと同じ詳細度にするため :not([class*="..."]) を追加
        $css .= "  {$selector}{$selector}:not([class*=\"zenblocks-button-hover-animation-icon-\"]) > a:hover .wp-block-zenblocks-button-basic-icon,\n";
        $css .= "  {$selector}{$selector}:not([class*=\"zenblocks-button-hover-animation-icon-\"]) > button:hover .wp-block-zenblocks-button-basic-icon {\n";
        $css .= "    width: var(--icon-size-{$bp}-hover, var(--icon-size-{$bp}{$fallback['icon-size']})) !important;\n";
        $css .= "    height: var(--icon-size-{$bp}-hover, var(--icon-size-{$bp}{$fallback['icon-size']})) !important;\n";
        $css .= "    left: var(--icon-left-{$bp}-hover, var(--icon-left-{$bp}{$fallback['icon-left-hover']})) !important;\n";
        $css .= "    right: var(--icon-right-{$bp}-hover, var(--icon-right-{$bp}{$fallback['icon-right-hover']})) !important;\n";
        $css .= "    top: var(--icon-top-{$bp}-hover, var(--icon-top-{$bp}{$fallback['icon-top-hover']})) !important;\n";
        $css .= "    bottom: var(--icon-bottom-{$bp}-hover, var(--icon-bottom-{$bp}{$fallback['icon-bottom-hover']})) !important;\n";
        $css .= "    transform: translateX(var(--icon-transform-x-{$bp}-hover, var(--icon-transform-x-{$bp}{$fallback['icon-transform-x-hover']}))) translateY(var(--icon-transform-y-{$bp}-hover, var(--icon-transform-y-{$bp}{$fallback['icon-transform-y-hover']}))) !important;\n";
        $css .= "  }\n";

        // Icon hover styles - アニメーションありの場合
        $css .= "  {$selector}{$selector}[class*=\"zenblocks-button-hover-animation-icon-\"] > a:hover .wp-block-zenblocks-button-basic-icon,\n";
        $css .= "  {$selector}{$selector}[class*=\"zenblocks-button-hover-animation-icon-\"] > button:hover .wp-block-zenblocks-button-basic-icon {\n";
        $css .= "    width: var(--icon-size-{$bp}-hover, var(--icon-size-{$bp}{$fallback['icon-size']})) !important;\n";
        $css .= "    height: var(--icon-size-{$bp}-hover, var(--icon-size-{$bp}{$fallback['icon-size']})) !important;\n";
        $css .= "    left: var(--icon-left-{$bp}-hover, var(--icon-left-{$bp}{$fallback['icon-left-hover']})) !important;\n";
        $css .= "    right: var(--icon-right-{$bp}-hover, var(--icon-right-{$bp}{$fallback['icon-right-hover']})) !important;\n";
        $css .= "    top: var(--icon-top-{$bp}-hover, var(--icon-top-{$bp}{$fallback['icon-top-hover']})) !important;\n";
        $css .= "    bottom: var(--icon-bottom-{$bp}-hover, var(--icon-bottom-{$bp}{$fallback['icon-bottom-hover']})) !important;\n";
        $css .= "    transform: translateX(var(--icon-transform-x-{$bp}-hover, var(--icon-transform-x-{$bp}{$fallback['icon-transform-x-hover']}))) translateY(var(--icon-transform-y-{$bp}-hover, var(--icon-transform-y-{$bp}{$fallback['icon-transform-y-hover']}))) !important;\n";
        $css .= "  }\n";

        // Icon frame hover styles - アニメーションなしの場合
        // PC hover値へのフォールバックを追加（{$bp}-hover → pc-hover → {$bp}通常値）
        $css .= "  {$selector}{$selector}:not([class*=\"zenblocks-button-hover-animation-icon-\"]) > a:hover .wp-block-zenblocks-button-basic-icon.wrap_icon:before,\n";
        $css .= "  {$selector}{$selector}:not([class*=\"zenblocks-button-hover-animation-icon-\"]) > button:hover .wp-block-zenblocks-button-basic-icon.wrap_icon:before {\n";
        $css .= "    width: var(--icon-frame-width-{$bp}-hover, var(--icon-frame-width-pc-hover, var(--icon-frame-width-{$bp}{$fallback['icon-frame-width']}))) !important;\n";
        $css .= "    height: var(--icon-frame-height-{$bp}-hover, var(--icon-frame-height-pc-hover, var(--icon-frame-height-{$bp}{$fallback['icon-frame-height']}))) !important;\n";
        $css .= "    border-radius: var(--icon-frame-radius-{$bp}-hover, var(--icon-frame-radius-pc-hover, var(--icon-frame-radius-{$bp}{$fallback['icon-frame-radius']}))) !important;\n";
        $css .= "    border-top-width: var(--icon-frame-border-top-width-{$bp}-hover, var(--icon-frame-border-top-width-pc-hover, var(--icon-frame-border-top-width-{$bp}{$fallback['icon-frame-border-top-width-hover']}))) !important;\n";
        $css .= "    border-right-width: var(--icon-frame-border-right-width-{$bp}-hover, var(--icon-frame-border-right-width-pc-hover, var(--icon-frame-border-right-width-{$bp}{$fallback['icon-frame-border-right-width-hover']}))) !important;\n";
        $css .= "    border-bottom-width: var(--icon-frame-border-bottom-width-{$bp}-hover, var(--icon-frame-border-bottom-width-pc-hover, var(--icon-frame-border-bottom-width-{$bp}{$fallback['icon-frame-border-bottom-width-hover']}))) !important;\n";
        $css .= "    border-left-width: var(--icon-frame-border-left-width-{$bp}-hover, var(--icon-frame-border-left-width-pc-hover, var(--icon-frame-border-left-width-{$bp}{$fallback['icon-frame-border-left-width-hover']}))) !important;\n";
        $css .= "    border-color: var(--icon-frame-border-color-{$bp}-hover, var(--icon-frame-border-color-pc-hover, var(--icon-frame-border-color-{$bp}{$fallback['icon-frame-border-color-hover']}))) !important;\n";
        $css .= "    border-style: var(--icon-frame-border-style-{$bp}-hover, var(--icon-frame-border-style-pc-hover, var(--icon-frame-border-style-{$bp}{$fallback['icon-frame-border-style-hover']}))) !important;\n";
        $css .= "    background: var(--icon-frame-bg-color-{$bp}-hover, var(--icon-frame-bg-color-pc-hover, var(--icon-frame-bg-color-{$bp}{$fallback['icon-frame-bg-color-hover']}))) !important;\n";
        $css .= "  }\n";

        // Icon frame hover styles - アニメーションありの場合
        // PC hover値へのフォールバックを追加（{$bp}-hover → pc-hover → {$bp}通常値）
        $css .= "  {$selector}{$selector}[class*=\"zenblocks-button-hover-animation-icon-\"] > a:hover .wp-block-zenblocks-button-basic-icon.wrap_icon:before,\n";
        $css .= "  {$selector}{$selector}[class*=\"zenblocks-button-hover-animation-icon-\"] > button:hover .wp-block-zenblocks-button-basic-icon.wrap_icon:before {\n";
        $css .= "    width: var(--icon-frame-width-{$bp}-hover, var(--icon-frame-width-pc-hover, var(--icon-frame-width-{$bp}{$fallback['icon-frame-width']}))) !important;\n";
        $css .= "    height: var(--icon-frame-height-{$bp}-hover, var(--icon-frame-height-pc-hover, var(--icon-frame-height-{$bp}{$fallback['icon-frame-height']}))) !important;\n";
        $css .= "    border-radius: var(--icon-frame-radius-{$bp}-hover, var(--icon-frame-radius-pc-hover, var(--icon-frame-radius-{$bp}{$fallback['icon-frame-radius']}))) !important;\n";
        $css .= "    border-top-width: var(--icon-frame-border-top-width-{$bp}-hover, var(--icon-frame-border-top-width-pc-hover, var(--icon-frame-border-top-width-{$bp}{$fallback['icon-frame-border-top-width-hover']}))) !important;\n";
        $css .= "    border-right-width: var(--icon-frame-border-right-width-{$bp}-hover, var(--icon-frame-border-right-width-pc-hover, var(--icon-frame-border-right-width-{$bp}{$fallback['icon-frame-border-right-width-hover']}))) !important;\n";
        $css .= "    border-bottom-width: var(--icon-frame-border-bottom-width-{$bp}-hover, var(--icon-frame-border-bottom-width-pc-hover, var(--icon-frame-border-bottom-width-{$bp}{$fallback['icon-frame-border-bottom-width-hover']}))) !important;\n";
        $css .= "    border-left-width: var(--icon-frame-border-left-width-{$bp}-hover, var(--icon-frame-border-left-width-pc-hover, var(--icon-frame-border-left-width-{$bp}{$fallback['icon-frame-border-left-width-hover']}))) !important;\n";
        $css .= "    border-color: var(--icon-frame-border-color-{$bp}-hover, var(--icon-frame-border-color-pc-hover, var(--icon-frame-border-color-{$bp}{$fallback['icon-frame-border-color-hover']}))) !important;\n";
        $css .= "    border-style: var(--icon-frame-border-style-{$bp}-hover, var(--icon-frame-border-style-pc-hover, var(--icon-frame-border-style-{$bp}{$fallback['icon-frame-border-style-hover']}))) !important;\n";
        $css .= "    background: var(--icon-frame-bg-color-{$bp}-hover, var(--icon-frame-bg-color-pc-hover, var(--icon-frame-bg-color-{$bp}{$fallback['icon-frame-bg-color-hover']}))) !important;\n";
        $css .= "  }\n";

        $css .= "  {$selector}:not([class*=\"zenblocks-button-hover-animation-icon-\"]) > a:hover .wp-block-zenblocks-button-basic-icon > .default.icon-{$bp},\n";
        $css .= "  {$selector}:not([class*=\"zenblocks-button-hover-animation-icon-\"]) > button:hover .wp-block-zenblocks-button-basic-icon > .default.icon-{$bp} {\n";
        $css .= "    display: none;\n";
        $css .= "  }\n";
        
        $css .= "  {$selector}:not([class*=\"zenblocks-button-hover-animation-icon-\"]) > a:hover .wp-block-zenblocks-button-basic-icon > .hover.icon-{$bp},\n";
        $css .= "  {$selector}:not([class*=\"zenblocks-button-hover-animation-icon-\"]) > button:hover .wp-block-zenblocks-button-basic-icon > .hover.icon-{$bp} {\n";
        $css .= "    display: flex;\n";
        $css .= "    opacity: 1;\n";
        $css .= "  }\n";
        
        return $css;
    }
    
    /**
     * Generate text styles for button
     */
    private function get_button_text_styles($bp, $fallback) {
        $selector = '.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic';
        // エディタ内ではメディアクエリを適用しない（エディタはgetPreviewStylesで制御）
        // body.block-editor-page はWordPressエディタページに付与されるクラス
        $editor_exclude = 'body:not(.block-editor-page) ';

        $css = "  /* Text - {$bp} */\n";
        $css .= "  {$editor_exclude}{$selector} > a .wp-block-zenblocks-button-basic-text .wp-block-zenblocks-button-basic-text-main,\n";
        $css .= "  {$editor_exclude}{$selector} > button .wp-block-zenblocks-button-basic-text .wp-block-zenblocks-button-basic-text-main {\n";
        $css .= "    height: var(--text-main-height-{$bp}{$fallback['text-main-height']}) !important;\n";
        $css .= "  }\n";

        $css .= "  {$editor_exclude}{$selector} > a .wp-block-zenblocks-button-basic-text .wp-block-zenblocks-button-basic-text-main .default,\n";
        $css .= "  {$editor_exclude}{$selector} > button .wp-block-zenblocks-button-basic-text .wp-block-zenblocks-button-basic-text-main .default {\n";
        $css .= "    font-size: var(--font-size-{$bp}{$fallback['font-size']}) !important;\n";
        $css .= "    font-weight: var(--font-weight-{$bp}{$fallback['font-weight']}) !important;\n";
        $css .= "    line-height: var(--line-height-{$bp}{$fallback['line-height']}) !important;\n";
        $css .= "    letter-spacing: var(--letter-spacing-{$bp}{$fallback['letter-spacing']}) !important;\n";
        $css .= "  }\n";

        $css .= "  {$editor_exclude}{$selector} > a .wp-block-zenblocks-button-basic-text .wp-block-zenblocks-button-basic-text-main .hover,\n";
        $css .= "  {$editor_exclude}{$selector} > button .wp-block-zenblocks-button-basic-text .wp-block-zenblocks-button-basic-text-main .hover {\n";
        $css .= "    font-size: var(--font-size-{$bp}-hover{$fallback['font-size-hover']}) !important;\n";
        $css .= "    font-weight: var(--font-weight-{$bp}-hover{$fallback['font-weight-hover']}) !important;\n";
        $css .= "    line-height: var(--line-height-{$bp}-hover{$fallback['line-height-hover']}) !important;\n";
        $css .= "    letter-spacing: var(--letter-spacing-{$bp}-hover{$fallback['letter-spacing-hover']}) !important;\n";
        $css .= "  }\n";

        return $css;
    }

    /**
     * Generate micro/sub text styles for button
     */
    private function get_button_micro_sub_text_styles($bp, $fallback) {
        $selector = '.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic';
        // エディタ内ではメディアクエリを適用しない（エディタはgetPreviewStylesで制御）
        // body.block-editor-page はWordPressエディタページに付与されるクラス
        $editor_exclude = 'body:not(.block-editor-page) ';

        $css = "  /* Micro/Sub Text - {$bp} */\n";

        // Micro Text
        $css .= "  {$editor_exclude}{$selector} > a .wp-block-zenblocks-button-basic-text-micro,\n";
        $css .= "  {$editor_exclude}{$selector} > button .wp-block-zenblocks-button-basic-text-micro {\n";
        $css .= "    font-size: var(--micro-text-font-size-{$bp}{$fallback['micro-text-font-size']}) !important;\n";
        $css .= "    font-weight: var(--micro-text-font-weight-{$bp}{$fallback['micro-text-font-weight']}) !important;\n";
        $css .= "    letter-spacing: var(--micro-text-letter-spacing-{$bp}{$fallback['micro-text-letter-spacing']}) !important;\n";
        $css .= "    line-height: var(--micro-text-line-height-{$bp}{$fallback['micro-text-line-height']}) !important;\n";
        $css .= "    margin-top: var(--micro-text-margin-top-{$bp}{$fallback['micro-text-margin-top']}) !important;\n";
        $css .= "    margin-right: var(--micro-text-margin-right-{$bp}{$fallback['micro-text-margin-right']}) !important;\n";
        $css .= "    margin-bottom: var(--micro-text-margin-bottom-{$bp}{$fallback['micro-text-margin-bottom']}) !important;\n";
        $css .= "    margin-left: var(--micro-text-margin-left-{$bp}{$fallback['micro-text-margin-left']}) !important;\n";
        $css .= "    padding-top: var(--micro-text-padding-top-{$bp}{$fallback['micro-text-padding-top']}) !important;\n";
        $css .= "    padding-right: var(--micro-text-padding-right-{$bp}{$fallback['micro-text-padding-right']}) !important;\n";
        $css .= "    padding-bottom: var(--micro-text-padding-bottom-{$bp}{$fallback['micro-text-padding-bottom']}) !important;\n";
        $css .= "    padding-left: var(--micro-text-padding-left-{$bp}{$fallback['micro-text-padding-left']}) !important;\n";
        $css .= "    transform: rotate(var(--micro-text-rotate-{$bp}{$fallback['micro-text-rotate']})) !important;\n";
        $css .= "  }\n";

        // Sub Text
        $css .= "  {$editor_exclude}{$selector} > a .wp-block-zenblocks-button-basic-text-sub,\n";
        $css .= "  {$editor_exclude}{$selector} > button .wp-block-zenblocks-button-basic-text-sub {\n";
        $css .= "    font-size: var(--sub-text-font-size-{$bp}{$fallback['sub-text-font-size']}) !important;\n";
        $css .= "    font-weight: var(--sub-text-font-weight-{$bp}{$fallback['sub-text-font-weight']}) !important;\n";
        $css .= "    letter-spacing: var(--sub-text-letter-spacing-{$bp}{$fallback['sub-text-letter-spacing']}) !important;\n";
        $css .= "    line-height: var(--sub-text-line-height-{$bp}{$fallback['sub-text-line-height']}) !important;\n";
        $css .= "    margin-top: var(--sub-text-margin-top-{$bp}{$fallback['sub-text-margin-top']}) !important;\n";
        $css .= "    margin-right: var(--sub-text-margin-right-{$bp}{$fallback['sub-text-margin-right']}) !important;\n";
        $css .= "    margin-bottom: var(--sub-text-margin-bottom-{$bp}{$fallback['sub-text-margin-bottom']}) !important;\n";
        $css .= "    margin-left: var(--sub-text-margin-left-{$bp}{$fallback['sub-text-margin-left']}) !important;\n";
        $css .= "    padding-top: var(--sub-text-padding-top-{$bp}{$fallback['sub-text-padding-top']}) !important;\n";
        $css .= "    padding-right: var(--sub-text-padding-right-{$bp}{$fallback['sub-text-padding-right']}) !important;\n";
        $css .= "    padding-bottom: var(--sub-text-padding-bottom-{$bp}{$fallback['sub-text-padding-bottom']}) !important;\n";
        $css .= "    padding-left: var(--sub-text-padding-left-{$bp}{$fallback['sub-text-padding-left']}) !important;\n";
        $css .= "    transform: rotate(var(--sub-text-rotate-{$bp}{$fallback['sub-text-rotate']})) !important;\n";
        $css .= "  }\n";

        return $css;
    }

    /**
     * Generate icon styles for button
     */
    private function get_button_icon_styles($bp, $fallback) {
        $selector = '.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic';
        
        $css = "  /* Icon - {$bp} */\n";
        $css .= "  {$selector}.has-icon .wp-block-zenblocks-button-basic-content {\n";
        $css .= "    gap: var(--icon-gap-{$bp}{$fallback['icon-gap']}) !important;\n";
        $css .= "  }\n";

        $css .= "  {$selector} .wp-block-zenblocks-button-basic-icon {\n";
        $css .= "    width: var(--icon-size-{$bp}{$fallback['icon-size']}) !important;\n";
        $css .= "    height: var(--icon-size-{$bp}{$fallback['icon-size']}) !important;\n";
        $css .= "    left: var(--icon-left-{$bp}{$fallback['icon-left']}) !important;\n";
        $css .= "    right: var(--icon-right-{$bp}{$fallback['icon-right']}) !important;\n";
        $css .= "    top: var(--icon-top-{$bp}{$fallback['icon-top']}) !important;\n";
        $css .= "    bottom: var(--icon-bottom-{$bp}{$fallback['icon-bottom']}) !important;\n";
        $css .= "    transform: translateX(var(--icon-transform-x-{$bp}{$fallback['icon-transform-x']})) translateY(var(--icon-transform-y-{$bp}{$fallback['icon-transform-y']})) !important;\n";
        $css .= "    transition: width var(--icon-transition-duration, 300ms) var(--icon-transition-easing, ease) var(--icon-transition-delay, 0ms),\n";
        $css .= "                height var(--icon-transition-duration, 300ms) var(--icon-transition-easing, ease) var(--icon-transition-delay, 0ms),\n";
        $css .= "                top var(--icon-transition-duration, 300ms) var(--icon-transition-easing, ease) var(--icon-transition-delay, 0ms),\n";
        $css .= "                left var(--icon-transition-duration, 300ms) var(--icon-transition-easing, ease) var(--icon-transition-delay, 0ms),\n";
        $css .= "                right var(--icon-transition-duration, 300ms) var(--icon-transition-easing, ease) var(--icon-transition-delay, 0ms),\n";
        $css .= "                bottom var(--icon-transition-duration, 300ms) var(--icon-transition-easing, ease) var(--icon-transition-delay, 0ms),\n";
        $css .= "                transform var(--icon-transition-duration, 300ms) var(--icon-transition-easing, ease) var(--icon-transition-delay, 0ms) !important;\n";
        $css .= "  }\n";

        // SCSSと同じ詳細度にするため > a, > button を追加
        $css .= "  {$selector} > a .wp-block-zenblocks-button-basic-icon.wrap_icon:before,\n";
        $css .= "  {$selector} > button .wp-block-zenblocks-button-basic-icon.wrap_icon:before {\n";
        $css .= "    width: var(--icon-frame-width-{$bp}{$fallback['icon-frame-width']}) !important;\n";
        $css .= "    height: var(--icon-frame-height-{$bp}{$fallback['icon-frame-height']}) !important;\n";
        $css .= "    border-radius: var(--icon-frame-radius-{$bp}{$fallback['icon-frame-radius']}) !important;\n";
        $css .= "    border-top-width: var(--icon-frame-border-top-width-{$bp}{$fallback['icon-frame-border-top-width']}) !important;\n";
        $css .= "    border-right-width: var(--icon-frame-border-right-width-{$bp}{$fallback['icon-frame-border-right-width']}) !important;\n";
        $css .= "    border-bottom-width: var(--icon-frame-border-bottom-width-{$bp}{$fallback['icon-frame-border-bottom-width']}) !important;\n";
        $css .= "    border-left-width: var(--icon-frame-border-left-width-{$bp}{$fallback['icon-frame-border-left-width']}) !important;\n";
        $css .= "    border-color: var(--icon-frame-border-color-{$bp}{$fallback['icon-frame-border-color']}) !important;\n";
        $css .= "    border-style: var(--icon-frame-border-style-{$bp}{$fallback['icon-frame-border-style']}) !important;\n";
        $css .= "    background: var(--icon-frame-bg-color-{$bp}{$fallback['icon-frame-bg-color']}) !important;\n";
        $css .= "  }\n";

        // Icon color - default state
        // SCSSと同じ詳細度にするため > a, > button を追加
        $css .= "  {$selector} > a .wp-block-zenblocks-button-basic-icon > .default,\n";
        $css .= "  {$selector} > button .wp-block-zenblocks-button-basic-icon > .default {\n";
        $css .= "    color: var(--icon-color-{$bp}{$fallback['icon-color']}) !important;\n";
        $css .= "  }\n";

        // Icon color - hover state (shown on hover)
        $css .= "  {$selector} > a .wp-block-zenblocks-button-basic-icon > .hover,\n";
        $css .= "  {$selector} > button .wp-block-zenblocks-button-basic-icon > .hover {\n";
        $css .= "    color: var(--icon-color-{$bp}-hover{$fallback['icon-color-hover']}) !important;\n";
        $css .= "  }\n";

        // レスポンシブアイコン表示切り替え（該当ブレークポイントを表示、PCを非表示）
        $css .= "  {$selector} .wp-block-zenblocks-button-basic-icon.responsive-icon > .default.icon-{$bp} { display: flex; }\n";
        $css .= "  {$selector} .wp-block-zenblocks-button-basic-icon.responsive-icon > .hover.icon-{$bp} { display: flex; }\n";
        $css .= "  {$selector} .wp-block-zenblocks-button-basic-icon.responsive-icon > .default.icon-pc { display: none; }\n";
        $css .= "  {$selector} .wp-block-zenblocks-button-basic-icon.responsive-icon > .hover.icon-pc { display: none; }\n";

        return $css;
    }
    
    /**
     * Generate background styles for button (crossfade method)
     */
    private function get_button_background_styles($bp, $fallback) {
        $selector = '.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic';

        // Background Overlay - Default state (crossfade method)
        $css = "  {$selector} > a .wp-block-zenblocks-button-basic-bg-overlay.default,\n";
        $css .= "  {$selector} > button .wp-block-zenblocks-button-basic-bg-overlay.default {\n";
        $css .= "    background-image: var(--background-color-{$bp}{$fallback['bg-color-image']}) !important;\n";
        $css .= "    opacity: var(--background-color-opacity-{$bp}{$fallback['bg-color-opacity']}) !important;\n";
        $css .= "    mix-blend-mode: var(--background-color-mix-blend-mode-{$bp}{$fallback['bg-color-blend']}) !important;\n";
        $css .= "    transition: opacity var(--background-transition-duration, 150ms) var(--background-transition-easing, ease) var(--background-transition-delay, 0ms) !important;\n";
        $css .= "  }\n";

        // Background Overlay - Hover state (initially hidden, with fallback to prevent white flash)
        // ホバー離脱時: .default が先にフェードインするよう遅延付きでフェードアウト
        $css .= "  {$selector} > a .wp-block-zenblocks-button-basic-bg-overlay.hover,\n";
        $css .= "  {$selector} > button .wp-block-zenblocks-button-basic-bg-overlay.hover {\n";
        $css .= "    background-image: var(--background-color-{$bp}-hover{$fallback['bg-color-image-hover']}) !important;\n";
        $css .= "    opacity: 0 !important;\n";
        $css .= "    mix-blend-mode: var(--background-color-mix-blend-mode-{$bp}-hover{$fallback['bg-color-blend-hover']}) !important;\n";
        $css .= "    transition: opacity var(--background-transition-duration, 150ms) var(--background-transition-easing, ease) calc(var(--background-transition-delay, 0ms) + var(--background-transition-duration, 150ms) * 0.5) !important;\n";
        $css .= "  }\n";

        // Background Base Color - Default state (independent layer for color/gradient)
        $css .= "  {$selector} > a .wp-block-zenblocks-button-basic-bg-base-color.default,\n";
        $css .= "  {$selector} > button .wp-block-zenblocks-button-basic-bg-base-color.default {\n";
        $css .= "    background-color: var(--background-base-color-{$bp}{$fallback['bg-base-color']}) !important;\n";
        $css .= "    background-image: var(--background-base-gradient-{$bp}{$fallback['bg-base-gradient']}) !important;\n";
        $css .= "    transition: background-color var(--background-transition-duration, 150ms) var(--background-transition-easing, ease) var(--background-transition-delay, 0ms) !important;\n";
        $css .= "  }\n";

        // Background Image - Default state
        $css .= "  {$selector} > a .wp-block-zenblocks-button-basic-bg-image.default,\n";
        $css .= "  {$selector} > button .wp-block-zenblocks-button-basic-bg-image.default {\n";
        $css .= "    background-image: var(--background-image-{$bp}{$fallback['bg-image']}) !important;\n";
        $css .= "    background-size: var(--background-size-{$bp}{$fallback['bg-size']}) !important;\n";
        $css .= "    background-position: var(--background-position-{$bp}{$fallback['bg-position']}) !important;\n";
        $css .= "    background-repeat: var(--background-repeat-{$bp}{$fallback['bg-repeat']}) !important;\n";
        $css .= "    transition: all var(--background-transition-duration, 150ms) var(--background-transition-easing, ease) var(--background-transition-delay, 0ms) !important;\n";
        $css .= "  }\n";

        // Background Pattern - Default state (CSS variable switching for hover)
        $css .= "  {$selector} > a .wp-block-zenblocks-button-basic-bg-pattern.default,\n";
        $css .= "  {$selector} > button .wp-block-zenblocks-button-basic-bg-pattern.default {\n";
        $css .= "    opacity: var(--background-pattern-opacity-{$bp}{$fallback['bg-pattern-opacity']}) !important;\n";
        $css .= "    mix-blend-mode: var(--background-pattern-blend-mode-{$bp}{$fallback['bg-pattern-blend-mode']}) !important;\n";
        $css .= "    transition: opacity var(--background-transition-duration, 150ms) var(--background-transition-easing, ease) var(--background-transition-delay, 0ms), background-size var(--background-transition-duration, 150ms) var(--background-transition-easing, ease) var(--background-transition-delay, 0ms) !important;\n";
        $css .= "  }\n";

        // Background Pattern styles for this breakpoint - Default
        $css .= $this->get_pattern_styles($bp, $fallback, 'default');

        return $css;
    }
    
    /**
     * Generate pattern background-image styles for a specific breakpoint
     */
    private function get_pattern_styles($bp, $fallback, $state) {
        $selector = '.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic';
        $class = $state === 'hover' ? '.hover' : '.default';
        $color_var = $state === 'hover' 
            ? "var(--background-pattern-color-{$bp}-hover{$fallback['bg-pattern-color-hover']})"
            : "var(--background-pattern-color-{$bp}{$fallback['bg-pattern-color']})";
        $size_var = $state === 'hover'
            ? "var(--background-pattern-size-{$bp}-hover{$fallback['bg-pattern-size-hover']})"
            : "var(--background-pattern-size-{$bp}{$fallback['bg-pattern-size']})";
        
        $patterns = array(
            'dots' => "radial-gradient(circle, {$color_var} 1px, transparent 1px)",
            'diagonal-lines' => "repeating-linear-gradient(45deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%)",
            'cross-lines' => "repeating-linear-gradient(45deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%), repeating-linear-gradient(-45deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%)",
            'horizontal-lines' => "repeating-linear-gradient(0deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%)",
            'vertical-lines' => "repeating-linear-gradient(90deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%)",
            'grid' => "linear-gradient({$color_var} 1px, transparent 1px), linear-gradient(90deg, {$color_var} 1px, transparent 1px)",
            'diagonal-grid' => "repeating-linear-gradient(45deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%), repeating-linear-gradient(-45deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%)",
            'circles' => "radial-gradient(circle, transparent 40%, {$color_var} 40%, {$color_var} 50%, transparent 50%)",
            'triangles' => "conic-gradient(from 210deg at 50% 85%, {$color_var} 0deg, {$color_var} 120deg, transparent 120deg)",
        );
        
        $css = '';
        foreach ($patterns as $pattern_name => $pattern_bg) {
            $css .= "  {$selector} > a .wp-block-zenblocks-button-basic-bg-pattern{$class}[data-pattern-{$bp}=\"{$pattern_name}\"],\n";
            $css .= "  {$selector} > button .wp-block-zenblocks-button-basic-bg-pattern{$class}[data-pattern-{$bp}=\"{$pattern_name}\"] {\n";
            $css .= "    background-image: {$pattern_bg} !important;\n";
            $css .= "    background-size: {$size_var} {$size_var} !important;\n";
            $css .= "  }\n";
        }
        
        return $css;
    }

    /**
     * Generate pattern background-image styles for a specific breakpoint on hover
     * Targets .default class with parent :hover selector
     */
    private function get_pattern_styles_hover($bp, $fallback) {
        $selector = '.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic';
        $color_var = "var(--background-pattern-color-{$bp}-hover{$fallback['bg-pattern-color-hover']})";
        $size_var = "var(--background-pattern-size-{$bp}-hover{$fallback['bg-pattern-size-hover']})";

        $patterns = array(
            'dots' => "radial-gradient(circle, {$color_var} 1px, transparent 1px)",
            'diagonal-lines' => "repeating-linear-gradient(45deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%)",
            'cross-lines' => "repeating-linear-gradient(45deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%), repeating-linear-gradient(-45deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%)",
            'horizontal-lines' => "repeating-linear-gradient(0deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%)",
            'vertical-lines' => "repeating-linear-gradient(90deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%)",
            'grid' => "linear-gradient({$color_var} 1px, transparent 1px), linear-gradient(90deg, {$color_var} 1px, transparent 1px)",
            'diagonal-grid' => "repeating-linear-gradient(45deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%), repeating-linear-gradient(-45deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%)",
            'circles' => "radial-gradient(circle, transparent 40%, {$color_var} 40%, {$color_var} 50%, transparent 50%)",
            'triangles' => "conic-gradient(from 210deg at 50% 85%, {$color_var} 0deg, {$color_var} 120deg, transparent 120deg)",
        );

        $css = '';
        foreach ($patterns as $pattern_name => $pattern_bg) {
            $css .= "  {$selector} > a:hover .wp-block-zenblocks-button-basic-bg-pattern.default[data-pattern-{$bp}=\"{$pattern_name}\"],\n";
            $css .= "  {$selector} > button:hover .wp-block-zenblocks-button-basic-bg-pattern.default[data-pattern-{$bp}=\"{$pattern_name}\"] {\n";
            $css .= "    background-image: {$pattern_bg} !important;\n";
            $css .= "    background-size: {$size_var} {$size_var} !important;\n";
            $css .= "  }\n";
        }

        return $css;
    }

    /**
     * Generate thumbnail styles for button - CSS Variable Switching Method
     */
    private function get_button_thumbnail_styles($bp, $fallback) {
        $selector = '.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic';

        // Thumbnail container
        $css = "  {$selector} > a .wp-block-zenblocks-button-basic-thumbnail,\n";
        $css .= "  {$selector} > button .wp-block-zenblocks-button-basic-thumbnail {\n";
        $css .= "    width: var(--thumbnail-frame-width-{$bp}{$fallback['thumbnail-width']}) !important;\n";
        $css .= "    height: var(--thumbnail-frame-height-{$bp}{$fallback['thumbnail-height']}) !important;\n";
        $css .= "    border-radius: var(--thumbnail-radius-{$bp}{$fallback['thumbnail-radius']}) !important;\n";
        $css .= "    box-sizing: var(--thumbnail-box-sizing-{$bp}{$fallback['thumbnail-box-sizing']}) !important;\n";
        $css .= "    border-width: var(--thumbnail-border-width-{$bp}{$fallback['thumbnail-border-width']}) !important;\n";
        $css .= "    border-style: var(--thumbnail-border-style-{$bp}{$fallback['thumbnail-border-style']}) !important;\n";
        $css .= "    border-color: var(--thumbnail-border-color-{$bp}{$fallback['thumbnail-border-color']}) !important;\n";
        $css .= "    left: var(--thumbnail-left-{$bp}{$fallback['thumbnail-left']}) !important;\n";
        $css .= "    right: var(--thumbnail-right-{$bp}{$fallback['thumbnail-right']}) !important;\n";
        $css .= "    top: var(--thumbnail-top-{$bp}{$fallback['thumbnail-top']}) !important;\n";
        $css .= "    bottom: var(--thumbnail-bottom-{$bp}{$fallback['thumbnail-bottom']}) !important;\n";
        $css .= "    transform: translateX(var(--thumbnail-transform-x-{$bp}{$fallback['thumbnail-transform-x']})) translateY(var(--thumbnail-transform-y-{$bp}{$fallback['thumbnail-transform-y']})) !important;\n";
        $css .= "    opacity: var(--thumbnail-opacity-{$bp}{$fallback['thumbnail-opacity']}) !important;\n";
        $css .= "    mix-blend-mode: var(--thumbnail-blend-mode-{$bp}{$fallback['thumbnail-blend-mode']}) !important;\n";
        $css .= "    transition: all var(--thumbnail-transition-duration, 300ms) var(--thumbnail-transition-easing, ease) var(--thumbnail-transition-delay, 0ms) !important;\n";
        $css .= "  }\n";

        // Thumbnail Image - Default State (CSS variable switching for hover)
        $css .= "  {$selector} > a .wp-block-zenblocks-button-basic-thumbnail .wp-block-zenblocks-button-basic-thumbnail-image.default,\n";
        $css .= "  {$selector} > button .wp-block-zenblocks-button-basic-thumbnail .wp-block-zenblocks-button-basic-thumbnail-image.default {\n";
        $css .= "    background-color: var(--thumbnail-image-base-color-{$bp}{$fallback['thumbnail-image-base-color']}) !important;\n";
        $css .= "    background-repeat: var(--thumbnail-repeat-{$bp}{$fallback['thumbnail-repeat']}) !important;\n";
        $css .= "    background-image: var(--thumbnail-image-{$bp}{$fallback['thumbnail-image']}) !important;\n";
        $css .= "    background-position: var(--thumbnail-position-{$bp}{$fallback['thumbnail-position']}) !important;\n";
        $css .= "    background-size: var(--thumbnail-size-{$bp}{$fallback['thumbnail-size']}) !important;\n";
        $css .= "    transition: all var(--thumbnail-transition-duration, 300ms) var(--thumbnail-transition-easing, ease) var(--thumbnail-transition-delay, 0ms) !important;\n";
        $css .= "  }\n";

        // Thumbnail Overlay - Default State (Crossfade: visible by default, fades out on hover)
        $css .= "  {$selector} > a .wp-block-zenblocks-button-basic-thumbnail .wp-block-zenblocks-button-basic-thumbnail-overlay.default,\n";
        $css .= "  {$selector} > button .wp-block-zenblocks-button-basic-thumbnail .wp-block-zenblocks-button-basic-thumbnail-overlay.default {\n";
        $css .= "    background-color: transparent !important;\n";
        $css .= "    background-image: var(--thumbnail-color-{$bp}{$fallback['thumbnail-color']}) !important;\n";
        $css .= "    opacity: var(--thumbnail-color-opacity-{$bp}{$fallback['thumbnail-color-opacity']}) !important;\n";
        $css .= "    mix-blend-mode: var(--thumbnail-color-blend-mode-{$bp}{$fallback['thumbnail-color-blend-mode']}) !important;\n";
        $css .= "    transition: opacity var(--thumbnail-transition-duration, 300ms) var(--thumbnail-transition-easing, ease) var(--thumbnail-transition-delay, 0ms);\n";
        $css .= "  }\n";

        // Thumbnail Overlay - Hover State (Crossfade: hidden by default, fades in on hover)
        $css .= "  {$selector} > a .wp-block-zenblocks-button-basic-thumbnail .wp-block-zenblocks-button-basic-thumbnail-overlay.hover,\n";
        $css .= "  {$selector} > button .wp-block-zenblocks-button-basic-thumbnail .wp-block-zenblocks-button-basic-thumbnail-overlay.hover {\n";
        $css .= "    background-color: transparent !important;\n";
        $css .= "    background-image: var(--thumbnail-color-{$bp}-hover, var(--thumbnail-color-{$bp}{$fallback['thumbnail-color-hover']})) !important;\n";
        $css .= "    mix-blend-mode: var(--thumbnail-color-blend-mode-{$bp}-hover, var(--thumbnail-color-blend-mode-{$bp}{$fallback['thumbnail-color-blend-mode-hover']})) !important;\n";
        $css .= "    transition: opacity var(--thumbnail-transition-duration, 300ms) var(--thumbnail-transition-easing, ease) var(--thumbnail-transition-delay, 0ms);\n";
        $css .= "  }\n";

        return $css;
    }

    /**
     * Generate thumbnail hover styles for button - CSS Variable Switching Method
     */
    private function get_button_thumbnail_hover_styles($bp, $fallback) {
        $selector = '.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic';

        // Frame properties transition
        $css = "  /* Thumbnail Hover - {$bp} */\n";
        $css .= "  {$selector} > a:hover .wp-block-zenblocks-button-basic-thumbnail,\n";
        $css .= "  {$selector} > button:hover .wp-block-zenblocks-button-basic-thumbnail {\n";
        $css .= "    width: var(--thumbnail-frame-width-{$bp}-hover, var(--thumbnail-frame-width-{$bp}{$fallback['thumbnail-width-hover']})) !important;\n";
        $css .= "    height: var(--thumbnail-frame-height-{$bp}-hover, var(--thumbnail-frame-height-{$bp}{$fallback['thumbnail-height-hover']})) !important;\n";
        $css .= "    border-radius: var(--thumbnail-radius-{$bp}-hover, var(--thumbnail-radius-{$bp}{$fallback['thumbnail-radius-hover']})) !important;\n";
        $css .= "    box-sizing: var(--thumbnail-box-sizing-{$bp}-hover, var(--thumbnail-box-sizing-{$bp}{$fallback['thumbnail-box-sizing-hover']})) !important;\n";
        $css .= "    border-width: var(--thumbnail-border-width-{$bp}-hover, var(--thumbnail-border-width-{$bp}{$fallback['thumbnail-border-width-hover']})) !important;\n";
        $css .= "    border-style: var(--thumbnail-border-style-{$bp}-hover, var(--thumbnail-border-style-{$bp}{$fallback['thumbnail-border-style-hover']})) !important;\n";
        $css .= "    border-color: var(--thumbnail-border-color-{$bp}-hover, var(--thumbnail-border-color-{$bp}{$fallback['thumbnail-border-color-hover']})) !important;\n";
        $css .= "    left: var(--thumbnail-left-{$bp}-hover, var(--thumbnail-left-{$bp}{$fallback['thumbnail-left-hover']})) !important;\n";
        $css .= "    right: var(--thumbnail-right-{$bp}-hover, var(--thumbnail-right-{$bp}{$fallback['thumbnail-right-hover']})) !important;\n";
        $css .= "    top: var(--thumbnail-top-{$bp}-hover, var(--thumbnail-top-{$bp}{$fallback['thumbnail-top-hover']})) !important;\n";
        $css .= "    bottom: var(--thumbnail-bottom-{$bp}-hover, var(--thumbnail-bottom-{$bp}{$fallback['thumbnail-bottom-hover']})) !important;\n";
        $css .= "    transform: translateX(var(--thumbnail-transform-x-{$bp}-hover, var(--thumbnail-transform-x-{$bp}{$fallback['thumbnail-transform-x-hover']}))) translateY(var(--thumbnail-transform-y-{$bp}-hover, var(--thumbnail-transform-y-{$bp}{$fallback['thumbnail-transform-y-hover']}))) !important;\n";
        $css .= "    opacity: var(--thumbnail-opacity-{$bp}-hover, var(--thumbnail-opacity-{$bp}{$fallback['thumbnail-opacity-hover']})) !important;\n";
        $css .= "    mix-blend-mode: var(--thumbnail-blend-mode-{$bp}-hover, var(--thumbnail-blend-mode-{$bp}{$fallback['thumbnail-blend-mode-hover']})) !important;\n";
        $css .= "  }\n";

        // Thumbnail Image Hover - CSS variable switching on .default element
        // Using doubled selector for higher specificity
        $css .= "  {$selector}{$selector} > a:hover .wp-block-zenblocks-button-basic-thumbnail .wp-block-zenblocks-button-basic-thumbnail-image.default,\n";
        $css .= "  {$selector}{$selector} > button:hover .wp-block-zenblocks-button-basic-thumbnail .wp-block-zenblocks-button-basic-thumbnail-image.default {\n";
        $css .= "    background-color: var(--thumbnail-image-base-color-{$bp}-hover, var(--thumbnail-image-base-color-{$bp}{$fallback['thumbnail-image-base-color-hover']})) !important;\n";
        $css .= "    background-repeat: var(--thumbnail-repeat-{$bp}-hover, var(--thumbnail-repeat-{$bp}{$fallback['thumbnail-repeat-hover']})) !important;\n";
        $css .= "    background-position: var(--thumbnail-position-{$bp}-hover, var(--thumbnail-position-{$bp}{$fallback['thumbnail-position-hover']})) !important;\n";
        $css .= "    background-size: var(--thumbnail-size-{$bp}-hover, var(--thumbnail-size-{$bp}{$fallback['thumbnail-size-hover']})) !important;\n";
        $css .= "  }\n";

        // Thumbnail Overlay Hover - Crossfade (hide default, show hover)
        // Using doubled selector for higher specificity
        $css .= "  {$selector}{$selector} > a:hover .wp-block-zenblocks-button-basic-thumbnail .wp-block-zenblocks-button-basic-thumbnail-overlay.default,\n";
        $css .= "  {$selector}{$selector} > button:hover .wp-block-zenblocks-button-basic-thumbnail .wp-block-zenblocks-button-basic-thumbnail-overlay.default {\n";
        $css .= "    opacity: 0 !important;\n";
        $css .= "  }\n";
        $css .= "  {$selector}{$selector} > a:hover .wp-block-zenblocks-button-basic-thumbnail .wp-block-zenblocks-button-basic-thumbnail-overlay.hover,\n";
        $css .= "  {$selector}{$selector} > button:hover .wp-block-zenblocks-button-basic-thumbnail .wp-block-zenblocks-button-basic-thumbnail-overlay.hover {\n";
        $css .= "    opacity: var(--thumbnail-color-opacity-{$bp}-hover, var(--thumbnail-color-opacity-{$bp}{$fallback['thumbnail-color-opacity-hover']})) !important;\n";
        $css .= "  }\n";

        return $css;
    }

    /**
     * Generate band styles for button
     */
    private function get_button_band_styles($bp, $fallback) {
        $selector = '.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic';

        // Band container
        $css = "  {$selector} > a .wp-block-zenblocks-button-basic-band,\n";
        $css .= "  {$selector} > button .wp-block-zenblocks-button-basic-band {\n";
        $css .= "    width: var(--band-frame-width-{$bp}{$fallback['band-width']}) !important;\n";
        $css .= "    height: var(--band-frame-height-{$bp}{$fallback['band-height']}) !important;\n";
        $css .= "    border-radius: var(--band-radius-{$bp}{$fallback['band-radius']}) !important;\n";
        $css .= "    box-sizing: var(--band-box-sizing-{$bp}{$fallback['band-box-sizing']}) !important;\n";
        $css .= "    border-width: var(--band-border-width-{$bp}{$fallback['band-border-width']}) !important;\n";
        $css .= "    border-style: var(--band-border-style-{$bp}{$fallback['band-border-style']}) !important;\n";
        $css .= "    border-color: var(--band-border-color-{$bp}{$fallback['band-border-color']}) !important;\n";
        $css .= "    left: var(--band-left-{$bp}{$fallback['band-left']}) !important;\n";
        $css .= "    right: var(--band-right-{$bp}{$fallback['band-right']}) !important;\n";
        $css .= "    top: var(--band-top-{$bp}{$fallback['band-top']}) !important;\n";
        $css .= "    bottom: var(--band-bottom-{$bp}{$fallback['band-bottom']}) !important;\n";
        $css .= "    transform: translateX(var(--band-transform-x-{$bp}{$fallback['band-transform-x']})) translateY(var(--band-transform-y-{$bp}{$fallback['band-transform-y']})) skewX(var(--band-skew-x-{$bp}{$fallback['band-skew-x']})) skewY(var(--band-skew-y-{$bp}{$fallback['band-skew-y']})) !important;\n";
        $css .= "    opacity: var(--band-opacity-{$bp}{$fallback['band-opacity']}) !important;\n";
        $css .= "    mix-blend-mode: var(--band-blend-mode-{$bp}{$fallback['band-blend-mode']}) !important;\n";
        $css .= "    transition: all var(--band-transition-duration, 300ms) var(--band-transition-easing, ease) var(--band-transition-delay, 0ms) !important;\n";
        $css .= "  }\n";

        // Band Image - Default State (CSS variable switching for hover)
        $css .= "  {$selector} > a .wp-block-zenblocks-button-basic-band .wp-block-zenblocks-button-basic-band-image.default,\n";
        $css .= "  {$selector} > button .wp-block-zenblocks-button-basic-band .wp-block-zenblocks-button-basic-band-image.default {\n";
        $css .= "    background-color: var(--band-image-base-color-{$bp}{$fallback['band-image-base-color']}) !important;\n";
        $css .= "    background-repeat: var(--band-repeat-{$bp}{$fallback['band-repeat']}), no-repeat !important;\n";
        $css .= "    background-image: var(--band-image-{$bp}{$fallback['band-image']}), var(--band-base-gradient-{$bp}{$fallback['band-base-gradient']}) !important;\n";
        $css .= "    background-position: var(--band-position-{$bp}{$fallback['band-position']}), center !important;\n";
        $css .= "    background-size: var(--band-size-{$bp}{$fallback['band-size']}), cover !important;\n";
        $css .= "    opacity: var(--band-image-opacity-{$bp}{$fallback['band-image-opacity']}) !important;\n";
        $css .= "    transition: all var(--band-transition-duration, 300ms) var(--band-transition-easing, ease) var(--band-transition-delay, 0ms) !important;\n";
        $css .= "  }\n";

        // Band Color - Default State (Crossfade: visible by default, fades out on hover)
        $css .= "  {$selector} > a .wp-block-zenblocks-button-basic-band .wp-block-zenblocks-button-basic-band-color.default,\n";
        $css .= "  {$selector} > button .wp-block-zenblocks-button-basic-band .wp-block-zenblocks-button-basic-band-color.default {\n";
        $css .= "    background-color: transparent !important;\n";
        $css .= "    background-image: var(--band-color-{$bp}{$fallback['band-color']}) !important;\n";
        $css .= "    opacity: var(--band-color-opacity-{$bp}{$fallback['band-color-opacity']}) !important;\n";
        $css .= "    mix-blend-mode: var(--band-color-blend-mode-{$bp}{$fallback['band-color-blend-mode']}) !important;\n";
        $css .= "    transition: opacity var(--band-transition-duration, 300ms) var(--band-transition-easing, ease) var(--band-transition-delay, 0ms);\n";
        $css .= "  }\n";

        // Band Color - Hover State (Crossfade: hidden by default, fades in on hover)
        $css .= "  {$selector} > a .wp-block-zenblocks-button-basic-band .wp-block-zenblocks-button-basic-band-color.hover,\n";
        $css .= "  {$selector} > button .wp-block-zenblocks-button-basic-band .wp-block-zenblocks-button-basic-band-color.hover {\n";
        $css .= "    background-color: transparent !important;\n";
        $css .= "    background-image: var(--band-color-{$bp}-hover, var(--band-color-{$bp}{$fallback['band-color-hover']})) !important;\n";
        $css .= "    mix-blend-mode: var(--band-color-blend-mode-{$bp}-hover, var(--band-color-blend-mode-{$bp}{$fallback['band-color-blend-mode-hover']})) !important;\n";
        $css .= "    transition: opacity var(--band-transition-duration, 300ms) var(--band-transition-easing, ease) var(--band-transition-delay, 0ms);\n";
        $css .= "  }\n";

        // Band Pattern - Default State (CSS variable switching for hover)
        $css .= "  {$selector} > a .wp-block-zenblocks-button-basic-band .wp-block-zenblocks-button-basic-band-pattern.default,\n";
        $css .= "  {$selector} > button .wp-block-zenblocks-button-basic-band .wp-block-zenblocks-button-basic-band-pattern.default {\n";
        $css .= "    opacity: var(--band-pattern-opacity-{$bp}{$fallback['band-pattern-opacity']}) !important;\n";
        $css .= "    mix-blend-mode: var(--band-pattern-blend-mode-{$bp}{$fallback['band-pattern-blend-mode']}) !important;\n";
        $css .= "    transition: opacity var(--band-transition-duration, 300ms) var(--band-transition-easing, ease) var(--band-transition-delay, 0ms), background-size var(--band-transition-duration, 300ms) var(--band-transition-easing, ease) var(--band-transition-delay, 0ms) !important;\n";
        $css .= "  }\n";

        // Band Pattern styles for this breakpoint - Default
        $css .= $this->get_band_pattern_styles($bp, $fallback, 'default');

        return $css;
    }

    /**
     * Generate band hover styles for button - CSS Variable Switching Method
     */
    private function get_button_band_hover_styles($bp, $fallback) {
        $selector = '.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic';

        // Frame properties transition
        // Using doubled selector (4x) for higher specificity to match SCSS hover
        $css = "  /* Band Hover - {$bp} */\n";
        $css .= "  {$selector}{$selector} > a:hover .wp-block-zenblocks-button-basic-band,\n";
        $css .= "  {$selector}{$selector} > button:hover .wp-block-zenblocks-button-basic-band {\n";
        $css .= "    width: var(--band-frame-width-{$bp}-hover, var(--band-frame-width-{$bp}{$fallback['band-width-hover']})) !important;\n";
        $css .= "    height: var(--band-frame-height-{$bp}-hover, var(--band-frame-height-{$bp}{$fallback['band-height-hover']})) !important;\n";
        $css .= "    border-radius: var(--band-radius-{$bp}-hover, var(--band-radius-{$bp}{$fallback['band-radius-hover']})) !important;\n";
        $css .= "    box-sizing: var(--band-box-sizing-{$bp}-hover, var(--band-box-sizing-{$bp}{$fallback['band-box-sizing-hover']})) !important;\n";
        $css .= "    border-width: var(--band-border-width-{$bp}-hover, var(--band-border-width-{$bp}{$fallback['band-border-width-hover']})) !important;\n";
        $css .= "    border-style: var(--band-border-style-{$bp}-hover, var(--band-border-style-{$bp}{$fallback['band-border-style-hover']})) !important;\n";
        $css .= "    border-color: var(--band-border-color-{$bp}-hover, var(--band-border-color-{$bp}{$fallback['band-border-color-hover']})) !important;\n";
        $css .= "    left: var(--band-left-{$bp}-hover, var(--band-left-{$bp}{$fallback['band-left-hover']})) !important;\n";
        $css .= "    right: var(--band-right-{$bp}-hover, var(--band-right-{$bp}{$fallback['band-right-hover']})) !important;\n";
        $css .= "    top: var(--band-top-{$bp}-hover, var(--band-top-{$bp}{$fallback['band-top-hover']})) !important;\n";
        $css .= "    bottom: var(--band-bottom-{$bp}-hover, var(--band-bottom-{$bp}{$fallback['band-bottom-hover']})) !important;\n";
        $css .= "    transform: translateX(var(--band-transform-x-{$bp}-hover, var(--band-transform-x-{$bp}{$fallback['band-transform-x-hover']}))) translateY(var(--band-transform-y-{$bp}-hover, var(--band-transform-y-{$bp}{$fallback['band-transform-y-hover']}))) skewX(var(--band-skew-x-{$bp}-hover, var(--band-skew-x-{$bp}{$fallback['band-skew-x-hover']}))) skewY(var(--band-skew-y-{$bp}-hover, var(--band-skew-y-{$bp}{$fallback['band-skew-y-hover']}))) !important;\n";
        $css .= "    opacity: var(--band-opacity-{$bp}-hover, var(--band-opacity-{$bp}{$fallback['band-opacity-hover']})) !important;\n";
        $css .= "    mix-blend-mode: var(--band-blend-mode-{$bp}-hover, var(--band-blend-mode-{$bp}{$fallback['band-blend-mode-hover']})) !important;\n";
        $css .= "  }\n";

        // Band Image Hover - CSS variable switching on .default element
        // Using doubled selector for higher specificity
        $css .= "  {$selector}{$selector} > a:hover .wp-block-zenblocks-button-basic-band .wp-block-zenblocks-button-basic-band-image.default,\n";
        $css .= "  {$selector}{$selector} > button:hover .wp-block-zenblocks-button-basic-band .wp-block-zenblocks-button-basic-band-image.default {\n";
        $css .= "    background-color: var(--band-image-base-color-{$bp}-hover, var(--band-image-base-color-{$bp}{$fallback['band-image-base-color-hover']})) !important;\n";
        $css .= "    background-repeat: var(--band-repeat-{$bp}-hover, var(--band-repeat-{$bp}{$fallback['band-repeat-hover']})), no-repeat !important;\n";
        $css .= "    background-image: var(--band-image-{$bp}-hover, var(--band-image-{$bp}{$fallback['band-image-hover']})), var(--band-base-gradient-{$bp}-hover, var(--band-base-gradient-{$bp}{$fallback['band-base-gradient-hover']})) !important;\n";
        $css .= "    background-position: var(--band-position-{$bp}-hover, var(--band-position-{$bp}{$fallback['band-position-hover']})), center !important;\n";
        $css .= "    background-size: var(--band-size-{$bp}-hover, var(--band-size-{$bp}{$fallback['band-size-hover']})), cover !important;\n";
        $css .= "    opacity: var(--band-image-opacity-{$bp}-hover, var(--band-image-opacity-{$bp}{$fallback['band-image-opacity-hover']})) !important;\n";
        $css .= "  }\n";

        // Band Color Hover - Crossfade (hide default, show hover)
        // Using doubled selector for higher specificity
        $css .= "  {$selector}{$selector} > a:hover .wp-block-zenblocks-button-basic-band .wp-block-zenblocks-button-basic-band-color.default,\n";
        $css .= "  {$selector}{$selector} > button:hover .wp-block-zenblocks-button-basic-band .wp-block-zenblocks-button-basic-band-color.default {\n";
        $css .= "    opacity: 0 !important;\n";
        $css .= "  }\n";
        $css .= "  {$selector}{$selector} > a:hover .wp-block-zenblocks-button-basic-band .wp-block-zenblocks-button-basic-band-color.hover,\n";
        $css .= "  {$selector}{$selector} > button:hover .wp-block-zenblocks-button-basic-band .wp-block-zenblocks-button-basic-band-color.hover {\n";
        $css .= "    opacity: var(--band-color-opacity-{$bp}-hover, var(--band-color-opacity-{$bp}{$fallback['band-color-opacity-hover']})) !important;\n";
        $css .= "  }\n";

        // Band Pattern Hover - CSS variable switching (opacity change on hover)
        $css .= "  {$selector}{$selector} > a:hover .wp-block-zenblocks-button-basic-band .wp-block-zenblocks-button-basic-band-pattern.default,\n";
        $css .= "  {$selector}{$selector} > button:hover .wp-block-zenblocks-button-basic-band .wp-block-zenblocks-button-basic-band-pattern.default {\n";
        $css .= "    opacity: var(--band-pattern-opacity-{$bp}-hover{$fallback['band-pattern-opacity-hover']}) !important;\n";
        $css .= "  }\n";

        // Band Pattern styles for this breakpoint - Hover (color/size change)
        $css .= $this->get_band_pattern_styles_hover($bp, $fallback);

        return $css;
    }

    /**
     * Generate band pattern background-image styles for a specific breakpoint
     */
    private function get_band_pattern_styles($bp, $fallback, $state) {
        $selector = '.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic';
        $class = $state === 'hover' ? '.hover' : '.default';
        $color_var = $state === 'hover'
            ? "var(--band-pattern-color-{$bp}-hover{$fallback['band-pattern-color-hover']})"
            : "var(--band-pattern-color-{$bp}{$fallback['band-pattern-color']})";
        $size_var = $state === 'hover'
            ? "var(--band-pattern-size-{$bp}-hover{$fallback['band-pattern-size-hover']})"
            : "var(--band-pattern-size-{$bp}{$fallback['band-pattern-size']})";

        $patterns = array(
            'dots' => "radial-gradient(circle, {$color_var} 1px, transparent 1px)",
            'diagonal-lines' => "repeating-linear-gradient(45deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%)",
            'cross-lines' => "repeating-linear-gradient(45deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%), repeating-linear-gradient(-45deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%)",
            'horizontal-lines' => "repeating-linear-gradient(0deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%)",
            'vertical-lines' => "repeating-linear-gradient(90deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%)",
            'grid' => "linear-gradient({$color_var} 1px, transparent 1px), linear-gradient(90deg, {$color_var} 1px, transparent 1px)",
            'diagonal-grid' => "repeating-linear-gradient(45deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%), repeating-linear-gradient(-45deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%)",
            'circles' => "radial-gradient(circle, transparent 40%, {$color_var} 40%, {$color_var} 50%, transparent 50%)",
            'triangles' => "conic-gradient(from 210deg at 50% 85%, {$color_var} 0deg, {$color_var} 120deg, transparent 120deg)",
        );

        $css = '';
        foreach ($patterns as $pattern_name => $pattern_bg) {
            $css .= "  {$selector} > a .wp-block-zenblocks-button-basic-band .wp-block-zenblocks-button-basic-band-pattern{$class}[data-pattern-{$bp}=\"{$pattern_name}\"],\n";
            $css .= "  {$selector} > button .wp-block-zenblocks-button-basic-band .wp-block-zenblocks-button-basic-band-pattern{$class}[data-pattern-{$bp}=\"{$pattern_name}\"] {\n";
            $css .= "    background-image: {$pattern_bg} !important;\n";
            $css .= "    background-size: {$size_var} {$size_var} !important;\n";
            $css .= "  }\n";
        }

        return $css;
    }

    /**
     * Generate band pattern background-image styles for a specific breakpoint on hover
     * Targets .default class with parent :hover selector
     */
    private function get_band_pattern_styles_hover($bp, $fallback) {
        $selector = '.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic';
        $color_var = "var(--band-pattern-color-{$bp}-hover{$fallback['band-pattern-color-hover']})";
        $size_var = "var(--band-pattern-size-{$bp}-hover{$fallback['band-pattern-size-hover']})";

        $patterns = array(
            'dots' => "radial-gradient(circle, {$color_var} 1px, transparent 1px)",
            'diagonal-lines' => "repeating-linear-gradient(45deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%)",
            'cross-lines' => "repeating-linear-gradient(45deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%), repeating-linear-gradient(-45deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%)",
            'horizontal-lines' => "repeating-linear-gradient(0deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%)",
            'vertical-lines' => "repeating-linear-gradient(90deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%)",
            'grid' => "linear-gradient({$color_var} 1px, transparent 1px), linear-gradient(90deg, {$color_var} 1px, transparent 1px)",
            'diagonal-grid' => "repeating-linear-gradient(45deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%), repeating-linear-gradient(-45deg, {$color_var} 0, {$color_var} 1px, transparent 0, transparent 50%)",
            'circles' => "radial-gradient(circle, transparent 40%, {$color_var} 40%, {$color_var} 50%, transparent 50%)",
            'triangles' => "conic-gradient(from 210deg at 50% 85%, {$color_var} 0deg, {$color_var} 120deg, transparent 120deg)",
        );

        $css = '';
        foreach ($patterns as $pattern_name => $pattern_bg) {
            $css .= "  {$selector} > a:hover .wp-block-zenblocks-button-basic-band .wp-block-zenblocks-button-basic-band-pattern.default[data-pattern-{$bp}=\"{$pattern_name}\"],\n";
            $css .= "  {$selector} > button:hover .wp-block-zenblocks-button-basic-band .wp-block-zenblocks-button-basic-band-pattern.default[data-pattern-{$bp}=\"{$pattern_name}\"] {\n";
            $css .= "    background-image: {$pattern_bg} !important;\n";
            $css .= "    background-size: {$size_var} {$size_var} !important;\n";
            $css .= "  }\n";
        }

        return $css;
    }

    /**
     * Generate micro/sub copy styles for button
     */
    private function get_button_copy_styles($bp, $fallback) {
        $selector = '.wp-block-zenblocks-button-basic.wp-block-zenblocks-button-basic';

        $css = "  {$selector} .wp-block-zenblocks-button-basic-copy-micro {\n";
        $css .= "    font-size: var(--copy-micro-font-size-{$bp}{$fallback['copy-font-size']}) !important;\n";
        $css .= "    font-weight: var(--copy-micro-font-weight-{$bp}{$fallback['copy-font-weight']}) !important;\n";
        $css .= "    letter-spacing: var(--copy-micro-letter-spacing-{$bp}{$fallback['copy-letter-spacing']}) !important;\n";
        $css .= "    line-height: var(--copy-micro-line-height-{$bp}{$fallback['copy-line-height']}) !important;\n";
        $css .= "    margin-top: var(--copy-micro-margin-top-{$bp}{$fallback['copy-micro-margin-top']}) !important;\n";
        $css .= "    margin-right: var(--copy-micro-margin-right-{$bp}{$fallback['copy-micro-margin-right']}) !important;\n";
        $css .= "    margin-bottom: var(--copy-micro-margin-bottom-{$bp}{$fallback['copy-micro-margin-bottom']}) !important;\n";
        $css .= "    margin-left: var(--copy-micro-margin-left-{$bp}{$fallback['copy-micro-margin-left']}) !important;\n";
        // Border: override -pc variable (SCSS reads -pc suffix), using non-suffixed as terminal
        // to avoid circular reference (we're defining -pc, so fallback must not reference -pc)
        $fb_border_w = str_replace('--copy-micro-border-width-pc', '--copy-micro-border-width', $fallback['copy-border-width']);
        $fb_border_s = str_replace('--copy-micro-border-style-pc', '--copy-micro-border-style', $fallback['copy-border-style']);
        $fb_border_c = str_replace('--copy-micro-border-color-pc', '--copy-micro-border-color', $fallback['copy-border-color']);
        $fb_border_r = str_replace('--copy-micro-border-radius-pc', '--copy-micro-border-radius', $fallback['copy-border-radius']);
        $css .= "    --copy-micro-border-width-pc: var(--copy-micro-border-width-{$bp}{$fb_border_w}) !important;\n";
        $css .= "    --copy-micro-border-style-pc: var(--copy-micro-border-style-{$bp}{$fb_border_s}) !important;\n";
        $css .= "    --copy-micro-border-color-pc: var(--copy-micro-border-color-{$bp}{$fb_border_c}) !important;\n";
        $css .= "    --copy-micro-border-radius-pc: var(--copy-micro-border-radius-{$bp}{$fb_border_r}) !important;\n";
        $css .= "  }\n";

        $css .= "  {$selector} .wp-block-zenblocks-button-basic-copy-micro-contents {\n";
        $css .= "    padding-top: var(--copy-micro-padding-top-{$bp}{$fallback['copy-padding']}) !important;\n";
        $css .= "    padding-right: var(--copy-micro-padding-right-{$bp}{$fallback['copy-padding']}) !important;\n";
        $css .= "    padding-bottom: var(--copy-micro-padding-bottom-{$bp}{$fallback['copy-padding']}) !important;\n";
        $css .= "    padding-left: var(--copy-micro-padding-left-{$bp}{$fallback['copy-padding']}) !important;\n";
        $css .= "  }\n";

        $css .= "  {$selector} .wp-block-zenblocks-button-basic-copy-sub {\n";
        $css .= "    font-size: var(--copy-sub-font-size-{$bp}{$fallback['copy-font-size']}) !important;\n";
        $css .= "    font-weight: var(--copy-sub-font-weight-{$bp}{$fallback['copy-font-weight']}) !important;\n";
        $css .= "    letter-spacing: var(--copy-sub-letter-spacing-{$bp}{$fallback['copy-letter-spacing']}) !important;\n";
        $css .= "    line-height: var(--copy-sub-line-height-{$bp}{$fallback['copy-line-height']}) !important;\n";
        $css .= "    margin-top: var(--copy-sub-margin-top-{$bp}{$fallback['copy-sub-margin-top']}) !important;\n";
        $css .= "    margin-right: var(--copy-sub-margin-right-{$bp}{$fallback['copy-sub-margin-right']}) !important;\n";
        $css .= "    margin-bottom: var(--copy-sub-margin-bottom-{$bp}{$fallback['copy-sub-margin-bottom']}) !important;\n";
        $css .= "    margin-left: var(--copy-sub-margin-left-{$bp}{$fallback['copy-sub-margin-left']}) !important;\n";
        $css .= "  }\n";

        $css .= "  {$selector} .wp-block-zenblocks-button-basic-copy-sub-contents {\n";
        $css .= "    padding-top: var(--copy-sub-padding-top-{$bp}{$fallback['copy-padding']}) !important;\n";
        $css .= "    padding-right: var(--copy-sub-padding-right-{$bp}{$fallback['copy-padding']}) !important;\n";
        $css .= "    padding-bottom: var(--copy-sub-padding-bottom-{$bp}{$fallback['copy-padding']}) !important;\n";
        $css .= "    padding-left: var(--copy-sub-padding-left-{$bp}{$fallback['copy-padding']}) !important;\n";
        $css .= "  }\n";
        
        return $css;
    }
    
    /**
     * Generate text basic responsive styles
     */
    private function get_text_basic_styles($bp, $has_md = true, $has_tb = true) {
        $selector = '.wp-block-zenblocks-text-basic';
        $fallback = $this->get_fallback_chain($bp, $has_md, $has_tb);
        
        $css = "  /* Text Basic - {$bp} */\n";
        $css .= "  {$selector} {\n";
        $css .= "    font-size: var(--font-size-{$bp}{$fallback['font-size']}) !important;\n";
        $css .= "    font-weight: var(--font-weight-{$bp}{$fallback['font-weight']}) !important;\n";
        $css .= "    line-height: var(--line-height-{$bp}{$fallback['line-height']}) !important;\n";
        $css .= "    letter-spacing: var(--letter-spacing-{$bp}{$fallback['letter-spacing']}) !important;\n";
        $css .= "  }\n";
        
        return $css;
    }
    
    /**
     * Get CSS variable fallback chain based on enabled breakpoints
     */
    private function get_fallback_chain($bp, $has_md = true, $has_tb = true) {
        $fallbacks = array();

        // Normal (non-hover) fallback chain
        if ($bp === 'md') {
            $chain = ', var(--{prop}-pc, {default})';
        } elseif ($bp === 'tb') {
            if ($has_md) {
                $chain = ', var(--{prop}-md, var(--{prop}-pc, {default}))';
            } else {
                $chain = ', var(--{prop}-pc, {default})';
            }
        } elseif ($bp === 'sp') {
            if ($has_tb && $has_md) {
                $chain = ', var(--{prop}-tb, var(--{prop}-md, var(--{prop}-pc, {default})))';
            } elseif ($has_tb) {
                $chain = ', var(--{prop}-tb, var(--{prop}-pc, {default}))';
            } elseif ($has_md) {
                $chain = ', var(--{prop}-md, var(--{prop}-pc, {default}))';
            } else {
                $chain = ', var(--{prop}-pc, {default})';
            }
        } else {
            $chain = ', {default}';
        }

        // Hover fallback chain: first falls back to PC hover, then to normal values
        if ($bp === 'md') {
            $hover_chain = ', var(--{prop}-pc-hover, var(--{prop}-pc, {default}))';
        } elseif ($bp === 'tb') {
            if ($has_md) {
                $hover_chain = ', var(--{prop}-md-hover, var(--{prop}-pc-hover, var(--{prop}-pc, {default})))';
            } else {
                $hover_chain = ', var(--{prop}-pc-hover, var(--{prop}-pc, {default}))';
            }
        } elseif ($bp === 'sp') {
            if ($has_tb && $has_md) {
                $hover_chain = ', var(--{prop}-tb-hover, var(--{prop}-md-hover, var(--{prop}-pc-hover, var(--{prop}-pc, {default}))))';
            } elseif ($has_tb) {
                $hover_chain = ', var(--{prop}-tb-hover, var(--{prop}-pc-hover, var(--{prop}-pc, {default})))';
            } elseif ($has_md) {
                $hover_chain = ', var(--{prop}-md-hover, var(--{prop}-pc-hover, var(--{prop}-pc, {default})))';
            } else {
                $hover_chain = ', var(--{prop}-pc-hover, var(--{prop}-pc, {default}))';
            }
        } else {
            $hover_chain = ', var(--{prop}-pc-hover, {default})';
        }
        
        $props = array(
            'width' => array('layout-width', 'auto'),
            'width-min' => array('layout-width-min', 'auto'),
            'width-max' => array('layout-width-max', 'none'),
            'height' => array('layout-height', 'auto'),
            'height-min' => array('layout-height-min', 'auto'),
            'height-max' => array('layout-height-max', 'none'),
            'position' => array('layout-position-type', 'relative'),
            'position-top' => array('layout-position-top', 'auto'),
            'position-right' => array('layout-position-right', 'auto'),
            'position-bottom' => array('layout-position-bottom', 'auto'),
            'position-left' => array('layout-position-left', 'auto'),
            'z-index' => array('layout-z-index', 'auto'),
            'transform-x' => array('layout-transform-translate-x', '0'),
            'transform-y' => array('layout-transform-translate-y', '0'),
            'margin' => array('spacing-margin-top', '0'),
            'margin-right' => array('spacing-margin-right', '0'),
            'margin-bottom' => array('spacing-margin-bottom', '0'),
            'margin-left' => array('spacing-margin-left', '0'),
            'padding' => array('spacing-padding-top', '0'),
            'padding-right' => array('spacing-padding-right', '0'),
            'padding-bottom' => array('spacing-padding-bottom', '0'),
            'padding-left' => array('spacing-padding-left', '0'),
            'border' => array('styling-border-width', '0'),
            'border-style' => array('styling-border-style', 'none'),
            'border-color' => array('styling-border-color', 'transparent'),
            'box-sizing' => array('styling-box-sizing', 'border-box'),
            'radius-top-left' => array('styling-radius-top-left', '0'),
            'radius-top-right' => array('styling-radius-top-right', '0'),
            'radius-bottom-right' => array('styling-radius-bottom-right', '0'),
            'radius-bottom-left' => array('styling-radius-bottom-left', '0'),
            'shadow' => array('styling-shadow', 'none'),
            'inner-shadow' => array('styling-inner-shadow', 'none'),
            'opacity' => array('styling-opacity', '1'),
            'mix-blend-mode' => array('styling-mix-blend-mode', 'normal'),
            'font-size' => array('font-size', 'inherit'),
            'font-weight' => array('font-weight', 'inherit'),
            'line-height' => array('line-height', 'inherit'),
            'letter-spacing' => array('letter-spacing', '0'),
            'text-main-height' => array('text-main-height', '1.6em'),
            'font-size-hover' => array('font-size', 'inherit'),
            'font-weight-hover' => array('font-weight', 'inherit'),
            'line-height-hover' => array('line-height', 'inherit'),
            'letter-spacing-hover' => array('letter-spacing', '0'),
            'micro-text-font-size' => array('micro-text-font-size', '12px'),
            'micro-text-font-weight' => array('micro-text-font-weight', 'inherit'),
            'micro-text-letter-spacing' => array('micro-text-letter-spacing', '0'),
            'micro-text-line-height' => array('micro-text-line-height', '1.2'),
            'micro-text-margin-top' => array('micro-text-margin-top', '0'),
            'micro-text-margin-right' => array('micro-text-margin-right', '0'),
            'micro-text-margin-bottom' => array('micro-text-margin-bottom', '0'),
            'micro-text-margin-left' => array('micro-text-margin-left', '0'),
            'micro-text-padding-top' => array('micro-text-padding-top', '0'),
            'micro-text-padding-right' => array('micro-text-padding-right', '0'),
            'micro-text-padding-bottom' => array('micro-text-padding-bottom', '0'),
            'micro-text-padding-left' => array('micro-text-padding-left', '0'),
            'micro-text-rotate' => array('micro-text-rotate', '0deg'),
            'sub-text-font-size' => array('sub-text-font-size', '12px'),
            'sub-text-font-weight' => array('sub-text-font-weight', 'inherit'),
            'sub-text-letter-spacing' => array('sub-text-letter-spacing', '0'),
            'sub-text-line-height' => array('sub-text-line-height', '1.2'),
            'sub-text-margin-top' => array('sub-text-margin-top', '0'),
            'sub-text-margin-right' => array('sub-text-margin-right', '0'),
            'sub-text-margin-bottom' => array('sub-text-margin-bottom', '0'),
            'sub-text-margin-left' => array('sub-text-margin-left', '0'),
            'sub-text-padding-top' => array('sub-text-padding-top', '0'),
            'sub-text-padding-right' => array('sub-text-padding-right', '0'),
            'sub-text-padding-bottom' => array('sub-text-padding-bottom', '0'),
            'sub-text-padding-left' => array('sub-text-padding-left', '0'),
            'sub-text-rotate' => array('sub-text-rotate', '0deg'),
            'icon-size' => array('icon-size', '25px'),
            'icon-gap' => array('icon-gap', '0.5em'),
            'icon-left' => array('icon-left', '50%'),
            'icon-right' => array('icon-right', 'auto'),
            'icon-top' => array('icon-top', '50%'),
            'icon-bottom' => array('icon-bottom', 'auto'),
            'icon-transform-x' => array('icon-transform-x', '-50%'),
            'icon-transform-y' => array('icon-transform-y', '-50%'),
            'icon-frame-width' => array('icon-frame-width', '40px'),
            'icon-frame-height' => array('icon-frame-height', '40px'),
            'icon-frame-radius' => array('icon-frame-radius', '0'),
            'icon-frame-border-width' => array('icon-frame-border-top-width', '0'),
            'icon-frame-border-top-width' => array('icon-frame-border-top-width', '0'),
            'icon-frame-border-right-width' => array('icon-frame-border-right-width', '0'),
            'icon-frame-border-bottom-width' => array('icon-frame-border-bottom-width', '0'),
            'icon-frame-border-left-width' => array('icon-frame-border-left-width', '0'),
            'icon-frame-border-color' => array('icon-frame-border-color', 'transparent'),
            'icon-frame-border-style' => array('icon-frame-border-style', 'solid'),
            'icon-frame-bg-color' => array('icon-frame-bg-color', 'transparent'),
            'icon-color' => array('icon-color', 'currentColor'),
            'icon-color-hover' => array('icon-color', 'currentColor'),
            'icon-size-hover' => array('icon-size', '25px'),
            'icon-left-hover' => array('icon-left', '50%'),
            'icon-right-hover' => array('icon-right', 'auto'),
            'icon-top-hover' => array('icon-top', '50%'),
            'icon-bottom-hover' => array('icon-bottom', 'auto'),
            'icon-transform-x-hover' => array('icon-transform-x', '-50%'),
            'icon-transform-y-hover' => array('icon-transform-y', '-50%'),
            'icon-frame-width-hover' => array('icon-frame-width', '40px'),
            'icon-frame-height-hover' => array('icon-frame-height', '40px'),
            'icon-frame-radius-hover' => array('icon-frame-radius', '0'),
            'icon-frame-border-top-width-hover' => array('icon-frame-border-top-width', '0'),
            'icon-frame-border-right-width-hover' => array('icon-frame-border-right-width', '0'),
            'icon-frame-border-bottom-width-hover' => array('icon-frame-border-bottom-width', '0'),
            'icon-frame-border-left-width-hover' => array('icon-frame-border-left-width', '0'),
            'icon-frame-border-color-hover' => array('icon-frame-border-color', 'transparent'),
            'icon-frame-border-style-hover' => array('icon-frame-border-style', 'solid'),
            'icon-frame-bg-color-hover' => array('icon-frame-bg-color', 'transparent'),
            'border-hover' => array('styling-border-width', '0'),
            'border-style-hover' => array('styling-border-style', 'none'),
            'border-color-hover' => array('styling-border-color', 'transparent'),
            'radius-top-left-hover' => array('styling-radius-top-left', '0'),
            'radius-top-right-hover' => array('styling-radius-top-right', '0'),
            'radius-bottom-right-hover' => array('styling-radius-bottom-right', '0'),
            'radius-bottom-left-hover' => array('styling-radius-bottom-left', '0'),
            'shadow-hover' => array('styling-shadow', 'none'),
            'inner-shadow-hover' => array('styling-inner-shadow', 'none'),
            'opacity-hover' => array('styling-opacity', '1'),
            'mix-blend-mode-hover' => array('styling-mix-blend-mode', 'normal'),
            'bg-color' => array('background-color', 'transparent'),
            'bg-color-image' => array('background-color', 'none'),
            'bg-color-opacity' => array('background-color-opacity', '1'),
            'bg-color-blend' => array('background-color-mix-blend-mode', 'normal'),
            'bg-color-image-hover' => array('background-color', 'none'),
            'bg-color-opacity-hover' => array('background-color-opacity', '1'),
            'bg-color-blend-hover' => array('background-color-mix-blend-mode', 'normal'),
            'bg-image' => array('background-image', 'none'),
            'bg-image-hover' => array('background-image', 'none'),
            'bg-size' => array('background-size', 'cover'),
            'bg-position' => array('background-position', 'center'),
            'bg-repeat' => array('background-repeat', 'no-repeat'),
            'bg-position-hover' => array('background-position', 'center'),
            'bg-size-hover' => array('background-size', 'cover'),
            'bg-repeat-hover' => array('background-repeat', 'no-repeat'),
            'bg-base-color' => array('background-base-color', 'transparent'),
            'bg-base-gradient' => array('background-base-gradient', 'none'),
            'bg-base-color-hover' => array('background-base-color', 'transparent'),
            'bg-base-gradient-hover' => array('background-base-gradient', 'none'),
            'bg-pattern-opacity' => array('background-pattern-opacity', '0.5'),
            'bg-pattern-color' => array('background-pattern-color', '#000'),
            'bg-pattern-size' => array('background-pattern-size', '10px'),
            'bg-pattern-blend-mode' => array('background-pattern-blend-mode', 'normal'),
            'bg-pattern-opacity-hover' => array('background-pattern-opacity', '0.5'),
            'bg-pattern-color-hover' => array('background-pattern-color', '#000'),
            'bg-pattern-size-hover' => array('background-pattern-size', '10px'),
            'bg-pattern-blend-mode-hover' => array('background-pattern-blend-mode', 'normal'),
            'thumbnail-width' => array('thumbnail-frame-width', '60px'),
            'thumbnail-height' => array('thumbnail-frame-height', '60px'),
            'thumbnail-radius' => array('thumbnail-radius', '0'),
            'thumbnail-box-sizing' => array('thumbnail-box-sizing', 'border-box'),
            'thumbnail-border-width' => array('thumbnail-border-width', '0'),
            'thumbnail-border-style' => array('thumbnail-border-style', 'none'),
            'thumbnail-border-color' => array('thumbnail-border-color', 'transparent'),
            'thumbnail-image' => array('thumbnail-image', 'none'),
            'thumbnail-position' => array('thumbnail-position', '50% 50%'),
            'thumbnail-size' => array('thumbnail-size', 'cover'),
            'thumbnail-repeat' => array('thumbnail-repeat', 'no-repeat'),
            'thumbnail-image-base-color' => array('thumbnail-image-base-color', 'transparent'),
            'thumbnail-left' => array('thumbnail-left', '0'),
            'thumbnail-right' => array('thumbnail-right', 'auto'),
            'thumbnail-top' => array('thumbnail-top', '0'),
            'thumbnail-bottom' => array('thumbnail-bottom', 'auto'),
            'thumbnail-transform-x' => array('thumbnail-transform-x', '0'),
            'thumbnail-transform-y' => array('thumbnail-transform-y', '0'),
            'thumbnail-opacity' => array('thumbnail-opacity', '1'),
            'thumbnail-blend-mode' => array('thumbnail-blend-mode', 'normal'),
            'thumbnail-color' => array('thumbnail-color', 'none'),
            'thumbnail-color-opacity' => array('thumbnail-color-opacity', '1'),
            'thumbnail-color-blend-mode' => array('thumbnail-color-blend-mode', 'normal'),
            'thumbnail-width-hover' => array('thumbnail-frame-width', '60px'),
            'thumbnail-height-hover' => array('thumbnail-frame-height', '60px'),
            'thumbnail-radius-hover' => array('thumbnail-radius', '0'),
            'thumbnail-box-sizing-hover' => array('thumbnail-box-sizing', 'border-box'),
            'thumbnail-border-width-hover' => array('thumbnail-border-width', '0'),
            'thumbnail-border-style-hover' => array('thumbnail-border-style', 'none'),
            'thumbnail-border-color-hover' => array('thumbnail-border-color', 'transparent'),
            'thumbnail-image-hover' => array('thumbnail-image', 'none'),
            'thumbnail-position-hover' => array('thumbnail-position', '50% 50%'),
            'thumbnail-size-hover' => array('thumbnail-size', 'cover'),
            'thumbnail-repeat-hover' => array('thumbnail-repeat', 'no-repeat'),
            'thumbnail-image-base-color-hover' => array('thumbnail-image-base-color', 'transparent'),
            'thumbnail-left-hover' => array('thumbnail-left', '0'),
            'thumbnail-right-hover' => array('thumbnail-right', 'auto'),
            'thumbnail-top-hover' => array('thumbnail-top', '0'),
            'thumbnail-bottom-hover' => array('thumbnail-bottom', 'auto'),
            'thumbnail-transform-x-hover' => array('thumbnail-transform-x', '0'),
            'thumbnail-transform-y-hover' => array('thumbnail-transform-y', '0'),
            'thumbnail-opacity-hover' => array('thumbnail-opacity', '1'),
            'thumbnail-blend-mode-hover' => array('thumbnail-blend-mode', 'normal'),
            'thumbnail-color-hover' => array('thumbnail-color', 'none'),
            'thumbnail-color-opacity-hover' => array('thumbnail-color-opacity', '1'),
            'thumbnail-color-blend-mode-hover' => array('thumbnail-color-blend-mode', 'normal'),
            'band-width' => array('band-frame-width', '100%'),
            'band-height' => array('band-frame-height', '100%'),
            'band-radius' => array('band-radius', '0'),
            'band-box-sizing' => array('band-box-sizing', 'border-box'),
            'band-border-width' => array('band-border-width', '0'),
            'band-border-style' => array('band-border-style', 'none'),
            'band-border-color' => array('band-border-color', 'transparent'),
            'band-image' => array('band-image', 'none'),
            'band-position' => array('band-position', '50% 50%'),
            'band-size' => array('band-size', 'cover'),
            'band-repeat' => array('band-repeat', 'no-repeat'),
            'band-image-base-color' => array('band-image-base-color', 'transparent'),
            'band-base-gradient' => array('band-base-gradient', 'none'),
            'band-image-opacity' => array('band-image-opacity', '1'),
            'band-left' => array('band-left', '0'),
            'band-right' => array('band-right', 'auto'),
            'band-top' => array('band-top', '0'),
            'band-bottom' => array('band-bottom', 'auto'),
            'band-transform-x' => array('band-transform-x', '0'),
            'band-transform-y' => array('band-transform-y', '0'),
            'band-color' => array('band-color', 'transparent'),
            'band-color-opacity' => array('band-color-opacity', '1'),
            'band-color-blend-mode' => array('band-color-blend-mode', 'normal'),
            'band-width-hover' => array('band-frame-width', '100%'),
            'band-height-hover' => array('band-frame-height', '100%'),
            'band-radius-hover' => array('band-radius', '0'),
            'band-box-sizing-hover' => array('band-box-sizing', 'border-box'),
            'band-border-width-hover' => array('band-border-width', '0'),
            'band-border-style-hover' => array('band-border-style', 'none'),
            'band-border-color-hover' => array('band-border-color', 'transparent'),
            'band-image-hover' => array('band-image', 'none'),
            'band-position-hover' => array('band-position', '50% 50%'),
            'band-size-hover' => array('band-size', 'cover'),
            'band-repeat-hover' => array('band-repeat', 'no-repeat'),
            'band-image-base-color-hover' => array('band-image-base-color', 'transparent'),
            'band-base-gradient-hover' => array('band-base-gradient', 'none'),
            'band-image-opacity-hover' => array('band-image-opacity', '1'),
            'band-left-hover' => array('band-left', '0'),
            'band-right-hover' => array('band-right', 'auto'),
            'band-top-hover' => array('band-top', '0'),
            'band-bottom-hover' => array('band-bottom', 'auto'),
            'band-transform-x-hover' => array('band-transform-x', '0'),
            'band-transform-y-hover' => array('band-transform-y', '0'),
            'band-color-hover' => array('band-color', 'transparent'),
            'band-color-opacity-hover' => array('band-color-opacity', '1'),
            'band-color-blend-mode-hover' => array('band-color-blend-mode', 'normal'),
            'band-opacity' => array('band-opacity', '1'),
            'band-blend-mode' => array('band-blend-mode', 'normal'),
            'band-opacity-hover' => array('band-opacity', '1'),
            'band-blend-mode-hover' => array('band-blend-mode', 'normal'),
            'band-skew-x' => array('band-skew-x', '0deg'),
            'band-skew-y' => array('band-skew-y', '0deg'),
            'band-skew-x-hover' => array('band-skew-x', '0deg'),
            'band-skew-y-hover' => array('band-skew-y', '0deg'),
            'band-pattern-opacity' => array('band-pattern-opacity', '0.5'),
            'band-pattern-color' => array('band-pattern-color', '#000'),
            'band-pattern-size' => array('band-pattern-size', '10px'),
            'band-pattern-blend-mode' => array('band-pattern-blend-mode', 'normal'),
            'band-pattern-opacity-hover' => array('band-pattern-opacity', '0.5'),
            'band-pattern-color-hover' => array('band-pattern-color', '#000'),
            'band-pattern-size-hover' => array('band-pattern-size', '10px'),
            'band-pattern-blend-mode-hover' => array('band-pattern-blend-mode', 'normal'),
            'copy-font-size' => array('copy-micro-font-size', '16px'),
            'copy-font-weight' => array('copy-micro-font-weight', 'normal'),
            'copy-letter-spacing' => array('copy-micro-letter-spacing', '0'),
            'copy-line-height' => array('copy-micro-line-height', '1.4'),
            'copy-micro-margin-top' => array('copy-micro-margin-top', '0'),
            'copy-micro-margin-right' => array('copy-micro-margin-right', 'auto'),
            'copy-micro-margin-bottom' => array('copy-micro-margin-bottom', '0'),
            'copy-micro-margin-left' => array('copy-micro-margin-left', 'auto'),
            'copy-sub-margin-top' => array('copy-sub-margin-top', '0'),
            'copy-sub-margin-right' => array('copy-sub-margin-right', 'auto'),
            'copy-sub-margin-bottom' => array('copy-sub-margin-bottom', '0'),
            'copy-sub-margin-left' => array('copy-sub-margin-left', 'auto'),
            'copy-padding' => array('copy-micro-padding-top', '0'),
            'copy-border-width' => array('copy-micro-border-width', '2px'),
            'copy-border-style' => array('copy-micro-border-style', 'solid'),
            'copy-border-color' => array('copy-micro-border-color', '#000'),
            'copy-border-radius' => array('copy-micro-border-radius', '0px'),
        );
        
        foreach ($props as $key => $config) {
            list($prop, $default) = $config;
            // Use hover chain for hover properties, normal chain otherwise
            $use_chain = (substr($key, -6) === '-hover') ? $hover_chain : $chain;
            $fallbacks[$key] = str_replace(
                array('{prop}', '{default}'),
                array($prop, $default),
                $use_chain
            );
        }
        
        return $fallbacks;
    }
}
