<?php
/**
 * Product Grid Widget — TAB_STYLE controls
 * Included via require inside register_controls(). $this = widget instance.
 */

// If this file is called directly, abort.
if (!defined('ABSPATH')) {
    exit;
}

// -----------------------------------------------------------------------
// Grid Container Styles
// -----------------------------------------------------------------------
$this->start_controls_section(
    'container_style',
    [
        'label' => __('Grid Container', 'ggm-commerce'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
    ]
);

$this->add_responsive_control(
    'container_padding',
    [
        'label' => __('Padding', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%', 'em'],
        'selectors' => [
            '{{WRAPPER}} .ggmc-product-grid-container' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Background::get_type(),
    [
        'name' => 'container_background',
        'label' => __('Background', 'ggm-commerce'),
        'types' => ['classic', 'gradient'],
        'selector' => '{{WRAPPER}} .ggmc-product-grid-container',
        'separator' => 'before',
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Border::get_type(),
    [
        'name' => 'container_border',
        'label' => __('Border', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .ggmc-product-grid-container',
    ]
);

$this->add_responsive_control(
    'container_border_radius',
    [
        'label' => __('Border Radius', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%'],
        'selectors' => [
            '{{WRAPPER}} .ggmc-product-grid-container' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->end_controls_section();

// -----------------------------------------------------------------------
// Sorting Controls Styles
// -----------------------------------------------------------------------
$this->start_controls_section(
    'sorting_style',
    [
        'label' => __('Sorting Controls', 'ggm-commerce'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        'condition' => [
            'enable_sorting' => 'yes',
        ],
    ]
);

$this->add_responsive_control(
    'sorting_alignment',
    [
        'label' => __('Alignment', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::CHOOSE,
        'options' => [
            'flex-start' => [
                'title' => __('Left', 'ggm-commerce'),
                'icon' => 'eicon-text-align-left',
            ],
            'center' => [
                'title' => __('Center', 'ggm-commerce'),
                'icon' => 'eicon-text-align-center',
            ],
            'flex-end' => [
                'title' => __('Right', 'ggm-commerce'),
                'icon' => 'eicon-text-align-right',
            ],
        ],
        'default' => 'flex-start',
        'selectors' => [
            '{{WRAPPER}} .grid-sorting-controls' => 'display: flex; justify-content: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'sorting_show_label',
    [
        'label' => __('Show Label', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SWITCHER,
        'label_on' => __('Yes', 'ggm-commerce'),
        'label_off' => __('No', 'ggm-commerce'),
        'return_value' => 'yes',
        'default' => 'yes',
    ]
);

$this->add_control(
    'sorting_label_text',
    [
        'label' => __('Label Text', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::TEXT,
        'default' => __('Sort By:', 'ggm-commerce'),
        'condition' => [
            'sorting_show_label' => 'yes',
        ],
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Typography::get_type(),
    [
        'name' => 'sorting_label_typography',
        'label' => __('Label Typography', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .sorting-group label',
        'condition' => [
            'sorting_show_label' => 'yes',
        ],
    ]
);

$this->add_control(
    'sorting_label_color',
    [
        'label' => __('Label Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .sorting-group label' => 'color: {{VALUE}};',
        ],
        'condition' => [
            'sorting_show_label' => 'yes',
        ],
    ]
);

$this->add_control(
    'sorting_dropdown_heading',
    [
        'label' => __('Dropdown', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::HEADING,
        'separator' => 'before',
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Typography::get_type(),
    [
        'name' => 'sorting_dropdown_typography',
        'label' => __('Typography', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .grid-sort-select',
    ]
);

$this->add_control(
    'sorting_dropdown_color',
    [
        'label' => __('Text Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .grid-sort-select' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'sorting_dropdown_bg',
    [
        'label' => __('Background Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .grid-sort-select' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'sorting_dropdown_border_color',
    [
        'label' => __('Border Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .grid-sort-select' => 'border-color: {{VALUE}};',
        ],
    ]
);

$this->end_controls_section();

// -----------------------------------------------------------------------
// Grid Items Styles
// -----------------------------------------------------------------------
$this->start_controls_section(
    'item_style',
    [
        'label' => __('Grid Items', 'ggm-commerce'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
    ]
);

$this->add_responsive_control(
    'item_card_padding',
    [
        'label' => __('Card Padding', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%', 'em'],
        'selectors' => [
            '{{WRAPPER}} .product-grid-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->add_responsive_control(
    'item_padding',
    [
        'label' => __('Content Padding', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%', 'em'],
        'selectors' => [
            '{{WRAPPER}} .product-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Background::get_type(),
    [
        'name' => 'item_background',
        'label' => __('Background', 'ggm-commerce'),
        'types' => ['classic', 'gradient'],
        'selector' => '{{WRAPPER}} .product-grid-item',
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Border::get_type(),
    [
        'name' => 'item_border',
        'label' => __('Border', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .product-grid-item',
    ]
);

$this->add_responsive_control(
    'item_border_radius',
    [
        'label' => __('Border Radius', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%'],
        'selectors' => [
            '{{WRAPPER}} .product-grid-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Box_Shadow::get_type(),
    [
        'name' => 'item_box_shadow',
        'label' => __('Box Shadow', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .product-grid-item',
    ]
);

$this->add_control(
    'item_hover_animation',
    [
        'label' => __('Hover Animation', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::HOVER_ANIMATION,
        'default' => '',
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Box_Shadow::get_type(),
    [
        'name' => 'item_hover_box_shadow',
        'label' => __('Hover Box Shadow', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .product-grid-item:hover',
    ]
);

$this->add_control(
    'item_hover_lift',
    [
        'label' => __('Hover Lift Effect', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SWITCHER,
        'label_on' => __('Yes', 'ggm-commerce'),
        'label_off' => __('No', 'ggm-commerce'),
        'return_value' => 'yes',
        'default' => 'no',
    ]
);

$this->add_responsive_control(
    'item_hover_lift_offset',
    [
        'label' => __('Lift Offset', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['px'],
        'range' => [
            'px' => [
                'min' => 0,
                'max' => 20,
            ],
        ],
        'default' => [
            'size' => 2,
            'unit' => 'px',
        ],
        'condition' => [
            'item_hover_lift' => 'yes',
        ],
        'selectors' => [
            '{{WRAPPER}} .product-grid-item:hover' => 'transform: translateY(-{{SIZE}}{{UNIT}});',
        ],
    ]
);

$this->add_control(
    'item_hover_transition',
    [
        'label' => __('Transition Duration', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['ms'],
        'range' => [
            'ms' => [
                'min' => 0,
                'max' => 1000,
                'step' => 50,
            ],
        ],
        'default' => [
            'size' => 300,
            'unit' => 'ms',
        ],
        'condition' => [
            'item_hover_lift' => 'yes',
        ],
        'selectors' => [
            '{{WRAPPER}} .product-grid-item' => 'transition: all {{SIZE}}ms ease;',
        ],
    ]
);

$this->end_controls_section();

// -----------------------------------------------------------------------
// Product Image Styles
// -----------------------------------------------------------------------
$this->start_controls_section(
    'image_style',
    [
        'label' => __('Product Image', 'ggm-commerce'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        'condition' => [
            'show_image' => 'yes',
        ],
    ]
);

$this->add_control(
    'image_hover_effect',
    [
        'label' => __('Hover Effect', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SELECT,
        'default' => 'zoom',
        'options' => [
            'none' => __('None', 'ggm-commerce'),
            'zoom' => __('Zoom', 'ggm-commerce'),
            'slide' => __('Slide', 'ggm-commerce'),
        ],
    ]
);

$this->add_control(
    'image_hover_trigger',
    [
        'label' => __('Hover Trigger', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SELECT,
        'default' => 'image',
        'options' => [
            'image' => __('Image Only', 'ggm-commerce'),
            'item' => __('Entire Grid Item', 'ggm-commerce'),
        ],
        'condition' => [
            'image_hover_effect!' => 'none',
        ],
    ]
);

$this->add_responsive_control(
    'image_height',
    [
        'label' => __('Image Height', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['px', '%'],
        'range' => [
            'px' => [
                'min' => 100,
                'max' => 500,
            ],
            '%' => [
                'min' => 50,
                'max' => 200,
            ],
        ],
        'selectors' => [
            '{{WRAPPER}} .product-image' => 'height: {{SIZE}}{{UNIT}};',
        ],
    ]
);

$this->add_responsive_control(
    'image_padding',
    [
        'label' => __('Padding', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%', 'em'],
        'selectors' => [
            '{{WRAPPER}} .product-image' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->add_responsive_control(
    'image_border_radius',
    [
        'label' => __('Border Radius', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%'],
        'selectors' => [
            '{{WRAPPER}} .product-image img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Box_Shadow::get_type(),
    [
        'name' => 'image_box_shadow',
        'label' => __('Box Shadow', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .product-image img',
    ]
);

$this->end_controls_section();

// -----------------------------------------------------------------------
// Product Badges Styles
// -----------------------------------------------------------------------
$this->start_controls_section(
    'badge_style',
    [
        'label' => __('Product Badges', 'ggm-commerce'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        'condition' => [
            'show_badge' => 'yes',
        ],
    ]
);

$this->add_control(
    'badge_position_type',
    [
        'label' => __('Position Type', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SELECT,
        'default' => 'absolute',
        'options' => [
            'absolute' => __('Overlay (Absolute)', 'ggm-commerce'),
            'static' => __('Inline (Static)', 'ggm-commerce'),
        ],
        'selectors' => [
            '{{WRAPPER}} .product-badges' => 'position: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'badge_position_preset',
    [
        'label' => __('Position', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SELECT,
        'default' => 'top-left',
        'options' => [
            'top-left' => __('Top Left', 'ggm-commerce'),
            'top-right' => __('Top Right', 'ggm-commerce'),
            'bottom-left' => __('Bottom Left', 'ggm-commerce'),
            'bottom-right' => __('Bottom Right', 'ggm-commerce'),
        ],
        'selectors_dictionary' => [
            'top-left' => 'top: var(--ggmc-spacing-sm, 8px); left: var(--ggmc-spacing-sm, 8px); bottom: auto; right: auto;',
            'top-right' => 'top: var(--ggmc-spacing-sm, 8px); right: var(--ggmc-spacing-sm, 8px); bottom: auto; left: auto;',
            'bottom-left' => 'bottom: var(--ggmc-spacing-sm, 8px); left: var(--ggmc-spacing-sm, 8px); top: auto; right: auto;',
            'bottom-right' => 'bottom: var(--ggmc-spacing-sm, 8px); right: var(--ggmc-spacing-sm, 8px); top: auto; left: auto;',
        ],
        'selectors' => [
            '{{WRAPPER}} .product-badges' => '{{VALUE}}',
        ],
        'condition' => [
            'badge_position_type' => 'absolute',
        ],
    ]
);

$this->add_control(
    'badge_position_divider',
    [
        'type' => \Elementor\Controls_Manager::DIVIDER,
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Typography::get_type(),
    [
        'name' => 'badge_typography',
        'label' => __('Typography', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .badge',
    ]
);

$this->add_control(
    'badge_sale_bg_color',
    [
        'label' => __('Sale Badge Background', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .badge.badge-sale' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'badge_sale_text_color',
    [
        'label' => __('Sale Badge Text', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .badge.badge-sale' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'badge_new_bg_color',
    [
        'label' => __('New Badge Background', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .badge.badge-new' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'badge_new_text_color',
    [
        'label' => __('New Badge Text', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .badge.badge-new' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'badge_featured_bg_color',
    [
        'label' => __('Featured Badge Background', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .badge.badge-featured' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'badge_featured_text_color',
    [
        'label' => __('Featured Badge Text', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .badge.badge-featured' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'badge_direction',
    [
        'label' => __('Badge Direction', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SELECT,
        'default' => 'vertical',
        'options' => [
            'horizontal' => __('Horizontal', 'ggm-commerce'),
            'vertical' => __('Vertical', 'ggm-commerce'),
        ],
        'selectors_dictionary' => [
            'horizontal' => 'row',
            'vertical' => 'column',
        ],
        'selectors' => [
            '{{WRAPPER}} .product-badges' => 'flex-direction: {{VALUE}};',
        ],
    ]
);

$this->add_responsive_control(
    'badge_spacing',
    [
        'label' => __('Spacing Between Badges', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['px'],
        'range' => [
            'px' => [
                'min' => 0,
                'max' => 20,
            ],
        ],
        'default' => [
            'size' => 5,
            'unit' => 'px',
        ],
        'selectors' => [
            '{{WRAPPER}} .product-badges' => 'gap: {{SIZE}}{{UNIT}};',
        ],
    ]
);

$this->add_responsive_control(
    'badge_padding',
    [
        'label' => __('Padding', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%', 'em'],
        'selectors' => [
            '{{WRAPPER}} .badge' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->add_responsive_control(
    'badge_border_radius',
    [
        'label' => __('Border Radius', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%'],
        'selectors' => [
            '{{WRAPPER}} .badge' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->end_controls_section();

// -----------------------------------------------------------------------
// Quick View Button Styles
// -----------------------------------------------------------------------
$this->start_controls_section(
    'quick_view_style',
    [
        'label' => __('Quick View Button', 'ggm-commerce'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        'condition' => [
            'show_quick_view' => 'yes',
        ],
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Typography::get_type(),
    [
        'name' => 'quick_view_typography',
        'label' => __('Typography', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .quick-view-btn',
    ]
);

$this->start_controls_tabs('quick_view_tabs');

$this->start_controls_tab(
    'quick_view_normal',
    [
        'label' => __('Normal', 'ggm-commerce'),
    ]
);

$this->add_control(
    'quick_view_icon_color',
    [
        'label' => __('Icon Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .quick-view-btn' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'quick_view_background_color',
    [
        'label' => __('Background Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'default' => 'rgba(255, 255, 255, 0.9)',
        'selectors' => [
            '{{WRAPPER}} .quick-view-btn' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->end_controls_tab();

$this->start_controls_tab(
    'quick_view_hover',
    [
        'label' => __('Hover', 'ggm-commerce'),
    ]
);

$this->add_control(
    'quick_view_hover_icon_color',
    [
        'label' => __('Icon Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .quick-view-btn:hover' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'quick_view_hover_background_color',
    [
        'label' => __('Background Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .quick-view-btn:hover' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->end_controls_tab();

$this->end_controls_tabs();

$this->add_responsive_control(
    'quick_view_icon_size',
    [
        'label' => __('Icon Size', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['px'],
        'range' => [
            'px' => [
                'min' => 12,
                'max' => 48,
            ],
        ],
        'default' => [
            'size' => 20,
            'unit' => 'px',
        ],
        'selectors' => [
            '{{WRAPPER}} .quick-view-btn' => 'font-size: {{SIZE}}{{UNIT}};',
        ],
    ]
);

$this->add_responsive_control(
    'quick_view_size',
    [
        'label' => __('Button Size', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['px'],
        'range' => [
            'px' => [
                'min' => 30,
                'max' => 80,
            ],
        ],
        'default' => [
            'size' => 40,
            'unit' => 'px',
        ],
        'selectors' => [
            '{{WRAPPER}} .quick-view-btn' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
        ],
    ]
);

$this->add_responsive_control(
    'quick_view_border_radius',
    [
        'label' => __('Border Radius', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%'],
        'default' => [
            'top' => '50',
            'right' => '50',
            'bottom' => '50',
            'left' => '50',
            'unit' => '%',
            'isLinked' => true,
        ],
        'selectors' => [
            '{{WRAPPER}} .quick-view-btn' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->end_controls_section();

// -----------------------------------------------------------------------
// Categories Styles
// -----------------------------------------------------------------------
$this->start_controls_section(
    'categories_style',
    [
        'label' => __('Categories', 'ggm-commerce'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        'condition' => [
            'show_categories' => 'yes',
        ],
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Typography::get_type(),
    [
        'name' => 'categories_typography',
        'label' => __('Typography', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .product-category',
    ]
);

$this->add_control(
    'categories_color',
    [
        'label' => __('Text Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .product-category' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'categories_background_color',
    [
        'label' => __('Background Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .product-category' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'categories_hover_color',
    [
        'label' => __('Hover Text Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .product-category:hover' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'categories_hover_background_color',
    [
        'label' => __('Hover Background Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .product-category:hover' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'categories_direction',
    [
        'label' => __('Direction', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SELECT,
        'default' => 'horizontal',
        'options' => [
            'horizontal' => __('Horizontal', 'ggm-commerce'),
            'vertical' => __('Vertical', 'ggm-commerce'),
        ],
        'selectors_dictionary' => [
            'horizontal' => 'row',
            'vertical' => 'column',
        ],
        'selectors' => [
            '{{WRAPPER}} .product-categories' => 'flex-direction: {{VALUE}};',
        ],
    ]
);

$this->add_responsive_control(
    'categories_spacing',
    [
        'label' => __('Spacing Between Categories', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['px'],
        'range' => [
            'px' => [
                'min' => 0,
                'max' => 20,
            ],
        ],
        'default' => [
            'size' => 5,
            'unit' => 'px',
        ],
        'selectors' => [
            '{{WRAPPER}} .product-categories' => 'gap: {{SIZE}}{{UNIT}};',
        ],
    ]
);

$this->add_responsive_control(
    'categories_padding',
    [
        'label' => __('Padding', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%', 'em'],
        'selectors' => [
            '{{WRAPPER}} .product-category' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->add_responsive_control(
    'categories_border_radius',
    [
        'label' => __('Border Radius', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%'],
        'selectors' => [
            '{{WRAPPER}} .product-category' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->add_responsive_control(
    'categories_margin',
    [
        'label' => __('Margin', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%', 'em'],
        'selectors' => [
            '{{WRAPPER}} .product-categories' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->end_controls_section();

// -----------------------------------------------------------------------
// Product Title Styles
// -----------------------------------------------------------------------
$this->start_controls_section(
    'title_style',
    [
        'label' => __('Product Title', 'ggm-commerce'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        'condition' => [
            'show_title' => 'yes',
        ],
    ]
);

$this->add_control(
    'title_html_tag',
    [
        'label' => __('HTML Tag', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SELECT,
        'default' => 'h3',
        'options' => [
            'h1' => __('H1', 'ggm-commerce'),
            'h2' => __('H2', 'ggm-commerce'),
            'h3' => __('H3', 'ggm-commerce'),
            'h4' => __('H4', 'ggm-commerce'),
            'h5' => __('H5', 'ggm-commerce'),
            'h6' => __('H6', 'ggm-commerce'),
            'p' => __('p', 'ggm-commerce'),
            'span' => __('span', 'ggm-commerce'),
            'div' => __('div', 'ggm-commerce'),
        ],
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Typography::get_type(),
    [
        'name' => 'title_typography',
        'label' => __('Typography', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .product-title',
    ]
);

$this->add_control(
    'title_color',
    [
        'label' => __('Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .product-title a' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'title_hover_color',
    [
        'label' => __('Hover Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .product-title a:hover' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_responsive_control(
    'title_margin',
    [
        'label' => __('Margin', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%', 'em'],
        'selectors' => [
            '{{WRAPPER}} .product-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->add_control(
    'title_box_heading',
    [
        'label'     => __('Title Box', 'ggm-commerce'),
        'type'      => \Elementor\Controls_Manager::HEADING,
        'separator' => 'before',
    ]
);

$this->add_control(
    'title_background_color',
    [
        'label'     => __('Background Color', 'ggm-commerce'),
        'type'      => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .product-title' => 'background-color: {{VALUE}}; display: inline-block;',
        ],
    ]
);

$this->add_responsive_control(
    'title_padding',
    [
        'label'      => __('Padding', 'ggm-commerce'),
        'type'       => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', 'em', '%'],
        'selectors'  => [
            '{{WRAPPER}} .product-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->add_responsive_control(
    'title_border_radius',
    [
        'label'      => __('Border Radius', 'ggm-commerce'),
        'type'       => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%'],
        'selectors'  => [
            '{{WRAPPER}} .product-title' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->end_controls_section();

// -----------------------------------------------------------------------
// Product Rating Styles
// -----------------------------------------------------------------------
$this->start_controls_section(
    'rating_style',
    [
        'label' => __('Product Rating', 'ggm-commerce'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        'condition' => [
            'show_rating' => 'yes',
        ],
    ]
);

$this->add_control(
    'rating_color',
    [
        'label' => __('Star Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .product-rating .star' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'rating_empty_color',
    [
        'label' => __('Empty Star Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .product-rating .star.empty' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_responsive_control(
    'rating_size',
    [
        'label' => __('Star Size', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['px'],
        'range' => [
            'px' => [
                'min' => 10,
                'max' => 50,
            ],
        ],
        'selectors' => [
            '{{WRAPPER}} .product-rating .star' => 'font-size: {{SIZE}}{{UNIT}};',
        ],
    ]
);

$this->add_responsive_control(
    'rating_spacing',
    [
        'label' => __('Spacing Between Stars', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['px'],
        'range' => [
            'px' => [
                'min' => 0,
                'max' => 10,
            ],
        ],
        'selectors' => [
            '{{WRAPPER}} .product-rating .star:not(:last-child)' => 'margin-right: {{SIZE}}{{UNIT}};',
        ],
    ]
);

$this->add_control(
    'rating_before_text',
    [
        'label' => __('Before Text', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::TEXT,
        'default' => '(',
        'description' => __('Text to display before the rating number', 'ggm-commerce'),
    ]
);

$this->add_control(
    'rating_after_text',
    [
        'label' => __('After Text', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::TEXT,
        'default' => ')',
        'description' => __('Text to display after the rating number', 'ggm-commerce'),
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Typography::get_type(),
    [
        'name' => 'rating_text_typography',
        'label' => __('Rating Text Typography', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .product-rating .rating-text',
    ]
);

$this->add_control(
    'rating_text_color',
    [
        'label' => __('Rating Text Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .product-rating .rating-text' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_responsive_control(
    'rating_text_size',
    [
        'label' => __('Rating Text Size', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['px'],
        'range' => [
            'px' => [
                'min' => 8,
                'max' => 24,
            ],
        ],
        'selectors' => [
            '{{WRAPPER}} .product-rating .rating-text' => 'font-size: {{SIZE}}{{UNIT}};',
        ],
    ]
);

$this->add_responsive_control(
    'rating_text_spacing',
    [
        'label' => __('Space Before Text', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['px'],
        'range' => [
            'px' => [
                'min' => 0,
                'max' => 20,
            ],
        ],
        'selectors' => [
            '{{WRAPPER}} .product-rating .rating-text' => 'margin-left: {{SIZE}}{{UNIT}};',
        ],
    ]
);

$this->add_responsive_control(
    'rating_margin',
    [
        'label' => __('Margin', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%', 'em'],
        'selectors' => [
            '{{WRAPPER}} .product-rating' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->add_control(
    'rating_box_heading',
    [
        'label'     => __('Rating Box', 'ggm-commerce'),
        'type'      => \Elementor\Controls_Manager::HEADING,
        'separator' => 'before',
    ]
);

$this->add_control(
    'rating_background_color',
    [
        'label'     => __('Background Color', 'ggm-commerce'),
        'type'      => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .product-rating' => 'background-color: {{VALUE}}; display: inline-block;',
        ],
    ]
);

$this->add_responsive_control(
    'rating_padding',
    [
        'label'      => __('Padding', 'ggm-commerce'),
        'type'       => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', 'em', '%'],
        'selectors'  => [
            '{{WRAPPER}} .product-rating' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->add_responsive_control(
    'rating_border_radius',
    [
        'label'      => __('Border Radius', 'ggm-commerce'),
        'type'       => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%'],
        'selectors'  => [
            '{{WRAPPER}} .product-rating' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->end_controls_section();

// -----------------------------------------------------------------------
// Product Price Styles
// -----------------------------------------------------------------------
$this->start_controls_section(
    'price_style',
    [
        'label' => __('Product Price', 'ggm-commerce'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        'condition' => [
            'show_price' => 'yes',
        ],
    ]
);

$this->add_control(
    'price_html_tag',
    [
        'label' => __('HTML Tag', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SELECT,
        'default' => 'h3',
        'options' => [
            'h1' => __('H1', 'ggm-commerce'),
            'h2' => __('H2', 'ggm-commerce'),
            'h3' => __('H3', 'ggm-commerce'),
            'h4' => __('H4', 'ggm-commerce'),
            'h5' => __('H5', 'ggm-commerce'),
            'h6' => __('H6', 'ggm-commerce'),
            'p' => __('p', 'ggm-commerce'),
            'span' => __('span', 'ggm-commerce'),
            'div' => __('div', 'ggm-commerce'),
        ],
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Typography::get_type(),
    [
        'name' => 'price_typography',
        'label' => __('Typography', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .product-price',
    ]
);

$this->add_control(
    'price_color',
    [
        'label' => __('Regular Price Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .product-price .current-price' => 'color: {{VALUE}};',
            '{{WRAPPER}} .product-price' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'sale_price_color',
    [
        'label' => __('Sale Price Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .product-price .sale-price' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'original_price_color',
    [
        'label' => __('Original Price Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .product-price .original-price' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_responsive_control(
    'price_margin',
    [
        'label' => __('Margin', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%', 'em'],
        'selectors' => [
            '{{WRAPPER}} .product-price' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->add_control(
    'price_box_heading',
    [
        'label'     => __('Price Box', 'ggm-commerce'),
        'type'      => \Elementor\Controls_Manager::HEADING,
        'separator' => 'before',
    ]
);

$this->add_control(
    'price_background_color',
    [
        'label'     => __('Background Color', 'ggm-commerce'),
        'type'      => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .product-price' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->add_responsive_control(
    'price_padding',
    [
        'label'      => __('Padding', 'ggm-commerce'),
        'type'       => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', 'em', '%'],
        'selectors'  => [
            '{{WRAPPER}} .product-price' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->add_responsive_control(
    'price_border_radius',
    [
        'label'      => __('Border Radius', 'ggm-commerce'),
        'type'       => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%'],
        'selectors'  => [
            '{{WRAPPER}} .product-price' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->end_controls_section();

// -----------------------------------------------------------------------
// Product Description Styles
// -----------------------------------------------------------------------
$this->start_controls_section(
    'description_style',
    [
        'label' => __('Product Description', 'ggm-commerce'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        'condition' => [
            'show_description' => 'yes',
        ],
    ]
);

$this->add_control(
    'description_length',
    [
        'label' => __('Length (words)', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::NUMBER,
        'default' => 15,
        'min' => 5,
        'max' => 50,
    ]
);

$this->add_control(
    'description_show_header',
    [
        'label' => __('Show Header', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SWITCHER,
        'label_on' => __('Yes', 'ggm-commerce'),
        'label_off' => __('No', 'ggm-commerce'),
        'return_value' => 'yes',
        'default' => 'no',
    ]
);

$this->add_control(
    'description_header_text',
    [
        'label' => __('Header Text', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::TEXT,
        'default' => __('Description', 'ggm-commerce'),
        'condition' => [
            'description_show_header' => 'yes',
        ],
    ]
);

$this->add_control(
    'description_header_html_tag',
    [
        'label' => __('Header HTML Tag', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SELECT,
        'default' => 'h3',
        'options' => [
            'h1' => __('H1', 'ggm-commerce'),
            'h2' => __('H2', 'ggm-commerce'),
            'h3' => __('H3', 'ggm-commerce'),
            'h4' => __('H4', 'ggm-commerce'),
            'h5' => __('H5', 'ggm-commerce'),
            'h6' => __('H6', 'ggm-commerce'),
            'p' => __('p', 'ggm-commerce'),
            'span' => __('span', 'ggm-commerce'),
            'div' => __('div', 'ggm-commerce'),
        ],
        'condition' => [
            'description_show_header' => 'yes',
        ],
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Typography::get_type(),
    [
        'name' => 'description_header_typography',
        'label' => __('Header Typography', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .product-description-header',
        'condition' => [
            'description_show_header' => 'yes',
        ],
    ]
);

$this->add_control(
    'description_header_color',
    [
        'label' => __('Header Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .product-description-header' => 'color: {{VALUE}};',
        ],
        'condition' => [
            'description_show_header' => 'yes',
        ],
    ]
);

$this->add_responsive_control(
    'description_header_padding',
    [
        'label' => __('Header Padding', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%', 'em'],
        'selectors' => [
            '{{WRAPPER}} .product-description-header' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
        'condition' => [
            'description_show_header' => 'yes',
        ],
    ]
);

$this->add_responsive_control(
    'description_header_margin',
    [
        'label' => __('Header Margin', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%', 'em'],
        'selectors' => [
            '{{WRAPPER}} .product-description-header' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
        'condition' => [
            'description_show_header' => 'yes',
        ],
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Border::get_type(),
    [
        'name' => 'description_header_border',
        'label' => __('Header Border', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .product-description-header',
        'condition' => [
            'description_show_header' => 'yes',
        ],
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Typography::get_type(),
    [
        'name' => 'description_typography',
        'label' => __('Typography', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .product-description',
    ]
);

$this->add_control(
    'description_color',
    [
        'label' => __('Text Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .product-description' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_responsive_control(
    'description_margin',
    [
        'label' => __('Margin', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%', 'em'],
        'selectors' => [
            '{{WRAPPER}} .product-description' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->add_control(
    'description_box_heading',
    [
        'label'     => __('Description Box', 'ggm-commerce'),
        'type'      => \Elementor\Controls_Manager::HEADING,
        'separator' => 'before',
    ]
);

$this->add_control(
    'description_background_color',
    [
        'label'     => __('Background Color', 'ggm-commerce'),
        'type'      => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .product-description' => 'background-color: {{VALUE}}; display: inline-block;',
        ],
    ]
);

$this->add_responsive_control(
    'description_padding',
    [
        'label'      => __('Padding', 'ggm-commerce'),
        'type'       => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', 'em', '%'],
        'selectors'  => [
            '{{WRAPPER}} .product-description' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->add_responsive_control(
    'description_border_radius',
    [
        'label'      => __('Border Radius', 'ggm-commerce'),
        'type'       => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%'],
        'selectors'  => [
            '{{WRAPPER}} .product-description' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->end_controls_section();

// -----------------------------------------------------------------------
// Stock Status Styles
// -----------------------------------------------------------------------
$this->start_controls_section(
    'stock_style',
    [
        'label' => __('Stock Status', 'ggm-commerce'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        'condition' => [
            'show_stock' => 'yes',
        ],
    ]
);

$this->add_control(
    'stock_html_tag',
    [
        'label' => __('HTML Tag', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SELECT,
        'default' => 'p',
        'options' => [
            'h1' => __('H1', 'ggm-commerce'),
            'h2' => __('H2', 'ggm-commerce'),
            'h3' => __('H3', 'ggm-commerce'),
            'h4' => __('H4', 'ggm-commerce'),
            'h5' => __('H5', 'ggm-commerce'),
            'h6' => __('H6', 'ggm-commerce'),
            'p' => __('p', 'ggm-commerce'),
            'span' => __('span', 'ggm-commerce'),
            'div' => __('div', 'ggm-commerce'),
        ],
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Typography::get_type(),
    [
        'name' => 'stock_typography',
        'label' => __('Typography', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .product-stock',
    ]
);

$this->add_control(
    'stock_in_stock_color',
    [
        'label' => __('In Stock Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .product-stock.in-stock' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'stock_low_stock_color',
    [
        'label' => __('Low Stock Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .product-stock.low-stock' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'stock_out_of_stock_color',
    [
        'label' => __('Out of Stock Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .product-stock.out-of-stock' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_responsive_control(
    'stock_margin',
    [
        'label' => __('Margin', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%', 'em'],
        'selectors' => [
            '{{WRAPPER}} .product-stock' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->add_control(
    'stock_box_heading',
    [
        'label'     => __('Stock Box', 'ggm-commerce'),
        'type'      => \Elementor\Controls_Manager::HEADING,
        'separator' => 'before',
    ]
);

$this->add_control(
    'stock_background_color',
    [
        'label'     => __('Background Color', 'ggm-commerce'),
        'type'      => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .product-stock' => 'background-color: {{VALUE}}; display: inline-block;',
        ],
    ]
);

$this->add_responsive_control(
    'stock_padding',
    [
        'label'      => __('Padding', 'ggm-commerce'),
        'type'       => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', 'em', '%'],
        'selectors'  => [
            '{{WRAPPER}} .product-stock' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->add_responsive_control(
    'stock_border_radius',
    [
        'label'      => __('Border Radius', 'ggm-commerce'),
        'type'       => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%'],
        'selectors'  => [
            '{{WRAPPER}} .product-stock' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->end_controls_section();

// -----------------------------------------------------------------------
// Details Link Styles
// -----------------------------------------------------------------------
$this->start_controls_section(
    'details_link_style',
    [
        'label' => __('Details Link', 'ggm-commerce'),
        'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
        'condition' => ['show_details_link' => 'yes'],
    ]
);

$this->add_control(
    'details_link_text',
    [
        'label'   => __('Link Text', 'ggm-commerce'),
        'type'    => \Elementor\Controls_Manager::TEXT,
        'default' => __('MORE DETAILS', 'ggm-commerce'),
    ]
);

$this->add_control(
    'details_link_icon',
    [
        'label'   => __('Icon', 'ggm-commerce'),
        'type'    => \Elementor\Controls_Manager::ICONS,
        'default' => [
            'value'   => 'eicon-chevron-right',
            'library' => 'eicons',
        ],
    ]
);

$this->add_control(
    'details_link_color',
    [
        'label'     => __('Text Color', 'ggm-commerce'),
        'type'      => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .product-details-link .details-link' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'details_link_hover_color',
    [
        'label'     => __('Hover Color', 'ggm-commerce'),
        'type'      => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .product-details-link .details-link:hover' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'details_link_icon_color',
    [
        'label'     => __('Icon Color', 'ggm-commerce'),
        'type'      => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .product-details-link .details-link-icon i' => 'color: {{VALUE}};',
            '{{WRAPPER}} .product-details-link .details-link-icon svg' => 'fill: {{VALUE}};',
        ],
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Typography::get_type(),
    [
        'name'     => 'details_link_typography',
        'label'    => __('Typography', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .product-details-link .details-link',
    ]
);

$this->add_responsive_control(
    'details_link_icon_size',
    [
        'label'      => __('Icon Size', 'ggm-commerce'),
        'type'       => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['px'],
        'range'      => [
            'px' => ['min' => 6, 'max' => 30],
        ],
        'default'    => ['size' => 10, 'unit' => 'px'],
        'selectors'  => [
            '{{WRAPPER}} .product-details-link .details-link-icon i' => 'font-size: {{SIZE}}{{UNIT}};',
            '{{WRAPPER}} .product-details-link .details-link-icon svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
        ],
    ]
);

$this->add_responsive_control(
    'details_link_icon_spacing',
    [
        'label'      => __('Icon Spacing', 'ggm-commerce'),
        'type'       => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['px'],
        'range'      => [
            'px' => ['min' => 0, 'max' => 20],
        ],
        'default'    => ['size' => 4, 'unit' => 'px'],
        'selectors'  => [
            '{{WRAPPER}} .product-details-link .details-link-icon' => 'margin-left: {{SIZE}}{{UNIT}};',
        ],
    ]
);

$this->add_responsive_control(
    'details_link_margin',
    [
        'label'      => __('Margin', 'ggm-commerce'),
        'type'       => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', 'em'],
        'selectors'  => [
            '{{WRAPPER}} .product-details-link' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->add_control(
    'details_link_box_heading',
    [
        'label'     => __('Details Link Box', 'ggm-commerce'),
        'type'      => \Elementor\Controls_Manager::HEADING,
        'separator' => 'before',
    ]
);

$this->add_control(
    'details_link_background_color',
    [
        'label'     => __('Background Color', 'ggm-commerce'),
        'type'      => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .product-details-link' => 'background-color: {{VALUE}}; display: inline-block;',
        ],
    ]
);

$this->add_responsive_control(
    'details_link_padding',
    [
        'label'      => __('Padding', 'ggm-commerce'),
        'type'       => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', 'em', '%'],
        'selectors'  => [
            '{{WRAPPER}} .product-details-link' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->add_responsive_control(
    'details_link_border_radius',
    [
        'label'      => __('Border Radius', 'ggm-commerce'),
        'type'       => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%'],
        'selectors'  => [
            '{{WRAPPER}} .product-details-link' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->end_controls_section();

// -----------------------------------------------------------------------
// Add to Cart Button Styles
// -----------------------------------------------------------------------
$this->start_controls_section(
    'button_style',
    [
        'label' => __('Add to Cart Button', 'ggm-commerce'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        'condition' => [
            'show_add_to_cart' => 'yes',
        ],
    ]
);

$this->add_control(
    'add_to_cart_text',
    [
        'label' => __('Button Text', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::TEXT,
        'default' => __('Add to Cart', 'ggm-commerce'),
    ]
);

// Variable Product Settings
$this->add_control(
    'variable_product_heading',
    [
        'label' => __('Variable Products', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::HEADING,
        'separator' => 'before',
    ]
);

$this->add_control(
    'variable_product_text',
    [
        'label' => __('Variable Product Button Text', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::TEXT,
        'default' => __('Select Options', 'ggm-commerce'),
        'description' => __('Text shown when product has variations', 'ggm-commerce'),
    ]
);

$this->add_control(
    'variable_product_behavior',
    [
        'label' => __('Variable Product Behavior', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SELECT,
        'default' => 'link_to_product',
        'options' => [
            'link_to_product' => __('Link to Product Page', 'ggm-commerce'),
            'disabled' => __('Disabled (wait for selection)', 'ggm-commerce'),
        ],
        'description' => __('What happens when button clicked without variation selected', 'ggm-commerce'),
    ]
);

$this->add_control(
    'grid_button_style',
    [
        'label' => __('Button Style', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SELECT,
        'default' => 'normal',
        'options' => [
            'normal' => __('Text Button', 'ggm-commerce'),
            'icon' => __('Icon Only', 'ggm-commerce'),
            'icon_text' => __('Icon & Text Button', 'ggm-commerce'),
        ],
    ]
);

$this->add_control(
    'add_to_cart_icon',
    [
        'label' => __('Icon', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::ICONS,
        'default' => [
            'value' => 'fas fa-shopping-cart',
            'library' => 'fa-solid',
        ],
        'condition' => [
            'grid_button_style' => ['icon', 'icon_text'],
        ],
    ]
);

$this->add_responsive_control(
    'add_to_cart_icon_size',
    [
        'label' => __('Icon Size', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['px'],
        'range' => [
            'px' => [
                'min' => 10,
                'max' => 100,
            ],
        ],
        'default' => [
            'size' => 16,
            'unit' => 'px',
        ],
        'selectors' => [
            '{{WRAPPER}} .ggmc-add-to-cart-btn i' => 'font-size: {{SIZE}}{{UNIT}};',
            '{{WRAPPER}} .ggmc-add-to-cart-btn svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
        ],
        'condition' => [
            'grid_button_style' => ['icon', 'icon_text'],
        ],
    ]
);

$this->add_control(
    'add_to_cart_icon_position',
    [
        'label' => __('Icon Position', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SELECT,
        'default' => 'left',
        'options' => [
            'left' => __('Left', 'ggm-commerce'),
            'right' => __('Right', 'ggm-commerce'),
        ],
        'condition' => [
            'grid_button_style' => 'icon_text',
        ],
    ]
);

$this->add_responsive_control(
    'add_to_cart_icon_spacing',
    [
        'label' => __('Icon Spacing', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['px'],
        'range' => [
            'px' => [
                'min' => 0,
                'max' => 50,
            ],
        ],
        'default' => [
            'size' => 8,
            'unit' => 'px',
        ],
        'selectors' => [
            '{{WRAPPER}} .ggmc-add-to-cart-btn.btn-icon-text' => 'gap: {{SIZE}}{{UNIT}};',
        ],
        'condition' => [
            'grid_button_style' => 'icon_text',
        ],
    ]
);

$this->add_control(
    'button_size',
    [
        'label' => __('Button Size', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SELECT,
        'default' => 'sm',
        'options' => [
            'xs' => __('Extra Small', 'ggm-commerce'),
            'sm' => __('Small', 'ggm-commerce'),
            'md' => __('Medium', 'ggm-commerce'),
            'lg' => __('Large', 'ggm-commerce'),
        ],
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Typography::get_type(),
    [
        'name' => 'button_typography',
        'label' => __('Typography', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .ggmc-add-to-cart-btn',
    ]
);

$this->start_controls_tabs('button_tabs');

$this->start_controls_tab(
    'button_normal',
    [
        'label' => __('Normal', 'ggm-commerce'),
    ]
);

$this->add_control(
    'button_text_color',
    [
        'label' => __('Text Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .ggmc-add-to-cart-btn' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'button_icon_color',
    [
        'label' => __('Icon Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .ggmc-add-to-cart-btn i' => 'color: {{VALUE}};',
            '{{WRAPPER}} .ggmc-add-to-cart-btn svg' => 'fill: {{VALUE}};',
        ],
        'condition' => [
            'grid_button_style' => ['icon', 'icon_text'],
        ],
    ]
);

$this->add_control(
    'button_background_color',
    [
        'label' => __('Background Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .ggmc-add-to-cart-btn' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->end_controls_tab();

$this->start_controls_tab(
    'button_hover',
    [
        'label' => __('Hover', 'ggm-commerce'),
    ]
);

$this->add_control(
    'button_hover_text_color',
    [
        'label' => __('Text Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .ggmc-add-to-cart-btn:hover' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'button_hover_icon_color',
    [
        'label' => __('Icon Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .ggmc-add-to-cart-btn:hover i' => 'color: {{VALUE}};',
            '{{WRAPPER}} .ggmc-add-to-cart-btn:hover svg' => 'fill: {{VALUE}};',
        ],
        'condition' => [
            'grid_button_style' => ['icon', 'icon_text'],
        ],
    ]
);

$this->add_control(
    'button_hover_background_color',
    [
        'label' => __('Background Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .ggmc-add-to-cart-btn:hover' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->end_controls_tab();

$this->end_controls_tabs();

$this->add_group_control(
    \Elementor\Group_Control_Border::get_type(),
    [
        'name' => 'button_border',
        'label' => __('Border', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .ggmc-add-to-cart-btn',
    ]
);

$this->add_responsive_control(
    'button_border_radius',
    [
        'label' => __('Border Radius', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%'],
        'selectors' => [
            '{{WRAPPER}} .ggmc-add-to-cart-btn' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->add_responsive_control(
    'button_padding',
    [
        'label' => __('Padding', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%', 'em'],
        'selectors' => [
            '{{WRAPPER}} .ggmc-add-to-cart-btn' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->add_control(
    'button_hover_lift',
    [
        'label' => __('Hover Lift Effect', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SWITCHER,
        'label_on' => __('Yes', 'ggm-commerce'),
        'label_off' => __('No', 'ggm-commerce'),
        'return_value' => 'yes',
        'default' => 'no',
    ]
);

$this->add_responsive_control(
    'button_hover_lift_offset',
    [
        'label' => __('Lift Offset', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['px'],
        'range' => [
            'px' => [
                'min' => 0,
                'max' => 20,
            ],
        ],
        'default' => [
            'size' => 2,
            'unit' => 'px',
        ],
        'condition' => [
            'button_hover_lift' => 'yes',
        ],
        'selectors' => [
            '{{WRAPPER}} .ggmc-add-to-cart-btn:hover' => 'transform: translateY(-{{SIZE}}{{UNIT}});',
        ],
    ]
);

$this->add_control(
    'button_hover_transition',
    [
        'label' => __('Transition Duration', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['ms'],
        'range' => [
            'ms' => [
                'min' => 0,
                'max' => 1000,
                'step' => 50,
            ],
        ],
        'default' => [
            'size' => 300,
            'unit' => 'ms',
        ],
        'condition' => [
            'button_hover_lift' => 'yes',
        ],
        'selectors' => [
            '{{WRAPPER}} .ggmc-add-to-cart-btn' => 'transition: all {{SIZE}}ms ease;',
        ],
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Box_Shadow::get_type(),
    [
        'name' => 'button_box_shadow',
        'label' => __('Box Shadow', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .ggmc-add-to-cart-btn',
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Box_Shadow::get_type(),
    [
        'name' => 'button_hover_box_shadow',
        'label' => __('Hover Box Shadow', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .ggmc-add-to-cart-btn:hover',
    ]
);

$this->end_controls_section();

// -----------------------------------------------------------------------
// Wishlist Button Styles
// -----------------------------------------------------------------------
$this->start_controls_section(
    'wishlist_style',
    [
        'label' => __('Wishlist Button', 'ggm-commerce'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        'condition' => [
            'show_wishlist' => 'yes',
        ],
    ]
);

$this->add_control(
    'wishlist_icon',
    [
        'label' => __('Icon', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::ICONS,
        'default' => [
            'value' => 'eicon-heart-o',
            'library' => 'eicons',
        ],
    ]
);

$this->add_responsive_control(
    'wishlist_icon_size',
    [
        'label' => __('Icon Size', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['px'],
        'range' => [
            'px' => [
                'min' => 10,
                'max' => 100,
            ],
        ],
        'default' => [
            'size' => 20,
            'unit' => 'px',
        ],
        'selectors' => [
            '{{WRAPPER}} .wishlist-btn i' => 'font-size: {{SIZE}}{{UNIT}};',
            '{{WRAPPER}} .wishlist-btn svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
        ],
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Typography::get_type(),
    [
        'name' => 'wishlist_typography',
        'label' => __('Typography', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .wishlist-btn',
    ]
);

$this->start_controls_tabs('wishlist_tabs');

$this->start_controls_tab(
    'wishlist_normal',
    [
        'label' => __('Normal', 'ggm-commerce'),
    ]
);

$this->add_control(
    'wishlist_text_color',
    [
        'label' => __('Text Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .wishlist-btn' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'wishlist_icon_color',
    [
        'label' => __('Icon Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .wishlist-btn i' => 'color: {{VALUE}};',
            '{{WRAPPER}} .wishlist-btn svg' => 'fill: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'wishlist_background_color',
    [
        'label' => __('Background Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .wishlist-btn' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->end_controls_tab();

$this->start_controls_tab(
    'wishlist_hover',
    [
        'label' => __('Hover', 'ggm-commerce'),
    ]
);

$this->add_control(
    'wishlist_hover_text_color',
    [
        'label' => __('Text Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .wishlist-btn:hover' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'wishlist_hover_icon_color',
    [
        'label' => __('Icon Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .wishlist-btn:hover i' => 'color: {{VALUE}};',
            '{{WRAPPER}} .wishlist-btn:hover svg' => 'fill: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'wishlist_hover_background_color',
    [
        'label' => __('Background Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .wishlist-btn:hover' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->end_controls_tab();

$this->end_controls_tabs();

$this->add_responsive_control(
    'wishlist_padding',
    [
        'label' => __('Padding', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%', 'em'],
        'selectors' => [
            '{{WRAPPER}} .wishlist-btn' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->add_responsive_control(
    'wishlist_border_radius',
    [
        'label' => __('Border Radius', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%'],
        'default' => [
            'top' => '50',
            'right' => '50',
            'bottom' => '50',
            'left' => '50',
            'unit' => '%',
            'isLinked' => true,
        ],
        'selectors' => [
            '{{WRAPPER}} .wishlist-btn' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->end_controls_section();

// -----------------------------------------------------------------------
// Compare Button Styles
// -----------------------------------------------------------------------
$this->start_controls_section(
    'compare_style',
    [
        'label' => __('Compare Button', 'ggm-commerce'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        'condition' => [
            'show_compare' => 'yes',
        ],
    ]
);

$this->add_control(
    'compare_icon',
    [
        'label' => __('Icon', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::ICONS,
        'default' => [
            'value' => 'eicon-exchange',
            'library' => 'eicons',
        ],
    ]
);

$this->add_responsive_control(
    'compare_icon_size',
    [
        'label' => __('Icon Size', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['px'],
        'range' => [
            'px' => [
                'min' => 10,
                'max' => 100,
            ],
        ],
        'default' => [
            'size' => 20,
            'unit' => 'px',
        ],
        'selectors' => [
            '{{WRAPPER}} .compare-btn i' => 'font-size: {{SIZE}}{{UNIT}};',
            '{{WRAPPER}} .compare-btn svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
        ],
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Typography::get_type(),
    [
        'name' => 'compare_typography',
        'label' => __('Typography', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .compare-btn',
    ]
);

$this->start_controls_tabs('compare_tabs');

$this->start_controls_tab(
    'compare_normal',
    [
        'label' => __('Normal', 'ggm-commerce'),
    ]
);

$this->add_control(
    'compare_text_color',
    [
        'label' => __('Text Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .compare-btn' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'compare_icon_color',
    [
        'label' => __('Icon Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .compare-btn i' => 'color: {{VALUE}};',
            '{{WRAPPER}} .compare-btn svg' => 'fill: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'compare_background_color',
    [
        'label' => __('Background Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .compare-btn' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->end_controls_tab();

$this->start_controls_tab(
    'compare_hover',
    [
        'label' => __('Hover', 'ggm-commerce'),
    ]
);

$this->add_control(
    'compare_hover_text_color',
    [
        'label' => __('Text Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .compare-btn:hover' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'compare_hover_icon_color',
    [
        'label' => __('Icon Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .compare-btn:hover i' => 'color: {{VALUE}};',
            '{{WRAPPER}} .compare-btn:hover svg' => 'fill: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'compare_hover_background_color',
    [
        'label' => __('Background Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .compare-btn:hover' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->end_controls_tab();

$this->end_controls_tabs();

$this->add_responsive_control(
    'compare_padding',
    [
        'label' => __('Padding', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%', 'em'],
        'selectors' => [
            '{{WRAPPER}} .compare-btn' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->add_responsive_control(
    'compare_border_radius',
    [
        'label' => __('Border Radius', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%'],
        'default' => [
            'top' => '50',
            'right' => '50',
            'bottom' => '50',
            'left' => '50',
            'unit' => '%',
            'isLinked' => true,
        ],
        'selectors' => [
            '{{WRAPPER}} .compare-btn' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->end_controls_section();

// -----------------------------------------------------------------------
// Pagination Styles
// -----------------------------------------------------------------------
$this->start_controls_section(
    'pagination_style',
    [
        'label' => __('Pagination', 'ggm-commerce'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        'condition' => [
            'show_pagination' => 'yes',
        ],
    ]
);

$this->add_responsive_control(
    'pagination_margin',
    [
        'label' => __('Margin', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%', 'em'],
        'selectors' => [
            '{{WRAPPER}} .ggmc-pagination' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->add_responsive_control(
    'pagination_align',
    [
        'label' => __('Alignment', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::CHOOSE,
        'options' => [
            'flex-start' => [
                'title' => __('Left', 'ggm-commerce'),
                'icon' => 'eicon-text-align-left',
            ],
            'center' => [
                'title' => __('Center', 'ggm-commerce'),
                'icon' => 'eicon-text-align-center',
            ],
            'flex-end' => [
                'title' => __('Right', 'ggm-commerce'),
                'icon' => 'eicon-text-align-right',
            ],
        ],
        'default' => 'center',
        'selectors' => [
            '{{WRAPPER}} .ggmc-pagination' => 'justify-content: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'show_prev_next',
    [
        'label' => __('Show Previous/Next Buttons', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SWITCHER,
        'label_on' => __('Show', 'ggm-commerce'),
        'label_off' => __('Hide', 'ggm-commerce'),
        'return_value' => 'yes',
        'default' => 'yes',
    ]
);

$this->add_responsive_control(
    'pagination_gap',
    [
        'label' => __('Gap Between Items', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['px'],
        'range' => [
            'px' => [
                'min' => 0,
                'max' => 50,
            ],
        ],
        'default' => [
            'size' => 8,
        ],
        'selectors' => [
            '{{WRAPPER}} .pagination-wrapper' => 'gap: {{SIZE}}{{UNIT}};',
        ],
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Typography::get_type(),
    [
        'name' => 'pagination_typography',
        'label' => __('Typography', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .pagination-prev, {{WRAPPER}} .pagination-next, {{WRAPPER}} .pagination-page, {{WRAPPER}} .pagination-current',
    ]
);

$this->add_responsive_control(
    'pagination_button_size',
    [
        'label' => __('Button Size', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['px'],
        'range' => [
            'px' => [
                'min' => 20,
                'max' => 80,
            ],
        ],
        'default' => [
            'size' => 40,
        ],
        'selectors' => [
            '{{WRAPPER}} .pagination-prev, {{WRAPPER}} .pagination-next, {{WRAPPER}} .pagination-page, {{WRAPPER}} .pagination-current' => 'min-width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
        ],
    ]
);

$this->add_responsive_control(
    'pagination_button_padding',
    [
        'label' => __('Button Padding', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%'],
        'selectors' => [
            '{{WRAPPER}} .pagination-prev, {{WRAPPER}} .pagination-next, {{WRAPPER}} .pagination-page, {{WRAPPER}} .pagination-current' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->start_controls_tabs('pagination_style_tabs');

$this->start_controls_tab(
    'pagination_normal_tab',
    [
        'label' => __('Normal', 'ggm-commerce'),
    ]
);

$this->add_control(
    'pagination_color',
    [
        'label' => __('Text Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .pagination-prev, {{WRAPPER}} .pagination-next, {{WRAPPER}} .pagination-page' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'pagination_background',
    [
        'label' => __('Background Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .pagination-prev, {{WRAPPER}} .pagination-next, {{WRAPPER}} .pagination-page' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Border::get_type(),
    [
        'name' => 'pagination_border',
        'label' => __('Border', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .pagination-prev, {{WRAPPER}} .pagination-next, {{WRAPPER}} .pagination-page',
        'fields_options' => [
            'border' => [
                'default' => 'solid',
            ],
            'width' => [
                'default' => [
                    'top' => '1',
                    'right' => '1',
                    'bottom' => '1',
                    'left' => '1',
                    'unit' => 'px',
                    'isLinked' => true,
                ],
            ],
        ],
    ]
);

$this->add_responsive_control(
    'pagination_border_radius',
    [
        'label' => __('Border Radius', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%'],
        'default' => [
            'top' => '10',
            'right' => '10',
            'bottom' => '10',
            'left' => '10',
            'unit' => 'px',
            'isLinked' => true,
        ],
        'selectors' => [
            '{{WRAPPER}} .pagination-prev, {{WRAPPER}} .pagination-next, {{WRAPPER}} .pagination-page, {{WRAPPER}} .pagination-current' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->end_controls_tab();

$this->start_controls_tab(
    'pagination_hover_tab',
    [
        'label' => __('Hover', 'ggm-commerce'),
    ]
);

$this->add_control(
    'pagination_hover_color',
    [
        'label' => __('Text Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .pagination-prev:hover, {{WRAPPER}} .pagination-next:hover, {{WRAPPER}} .pagination-page:hover' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'pagination_hover_background',
    [
        'label' => __('Background Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .pagination-prev:hover, {{WRAPPER}} .pagination-next:hover, {{WRAPPER}} .pagination-page:hover' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'pagination_hover_border_color',
    [
        'label' => __('Border Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .pagination-prev:hover, {{WRAPPER}} .pagination-next:hover, {{WRAPPER}} .pagination-page:hover' => 'border-color: {{VALUE}};',
        ],
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Box_Shadow::get_type(),
    [
        'name' => 'pagination_hover_shadow',
        'label' => __('Box Shadow', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .pagination-prev:hover, {{WRAPPER}} .pagination-next:hover, {{WRAPPER}} .pagination-page:hover',
    ]
);

$this->end_controls_tab();

$this->start_controls_tab(
    'pagination_active_tab',
    [
        'label' => __('Active', 'ggm-commerce'),
    ]
);

$this->add_control(
    'pagination_active_color',
    [
        'label' => __('Text Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .pagination-current' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'pagination_active_background',
    [
        'label' => __('Background Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .pagination-current' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'pagination_active_border_color',
    [
        'label' => __('Border Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .pagination-current' => 'border-color: {{VALUE}};',
        ],
    ]
);

$this->end_controls_tab();

$this->end_controls_tabs();

// Prev/Next Button Styles
$this->add_control(
    'prev_next_heading',
    [
        'label' => __('Previous/Next Buttons', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::HEADING,
        'separator' => 'before',
        'condition' => [
            'show_prev_next' => 'yes',
        ],
    ]
);

$this->start_controls_tabs(
    'prev_next_tabs',
    [
        'condition' => [
            'show_prev_next' => 'yes',
        ],
    ]
);

$this->start_controls_tab(
    'prev_next_normal_tab',
    [
        'label' => __('Normal', 'ggm-commerce'),
    ]
);

$this->add_control(
    'prev_next_color',
    [
        'label' => __('Text Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .pagination-prev, {{WRAPPER}} .pagination-next' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'prev_next_background',
    [
        'label' => __('Background Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .pagination-prev, {{WRAPPER}} .pagination-next' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->end_controls_tab();

$this->start_controls_tab(
    'prev_next_hover_tab',
    [
        'label' => __('Hover', 'ggm-commerce'),
    ]
);

$this->add_control(
    'prev_next_hover_color',
    [
        'label' => __('Text Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .pagination-prev:hover, {{WRAPPER}} .pagination-next:hover' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'prev_next_hover_background',
    [
        'label' => __('Background Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .pagination-prev:hover, {{WRAPPER}} .pagination-next:hover' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->end_controls_tab();

$this->end_controls_tabs();

$this->end_controls_section();
