<?php
/**
 * Product Carousel Widget - Style Tab Controls
 *
 * @package GGM_Commerce
 */

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

// ──────────────────────────────────────────────
// SECTION: Slide / Product Card
// ──────────────────────────────────────────────
$this->start_controls_section(
	'slide_card_style',
	array(
		'label' => __( 'Slide / Product Card', 'ggm-commerce' ),
		'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
	)
);

$this->add_control(
	'card_height_heading',
	array(
		'label' => __( 'Card Height', 'ggm-commerce' ),
		'type'  => \Elementor\Controls_Manager::HEADING,
	)
);

$this->add_control(
	'card_height_info',
	array(
		'type' => \Elementor\Controls_Manager::RAW_HTML,
		'raw'  => '<p style="font-size: 11px; color: #6d7882; margin: 0;">' . __( 'By default all cards match the height of the tallest card. Use min/max height to constrain.', 'ggm-commerce' ) . '</p>',
	)
);

$this->add_responsive_control(
	'card_min_height',
	array(
		'label'      => __( 'Min Height', 'ggm-commerce' ),
		'type'       => \Elementor\Controls_Manager::SLIDER,
		'size_units' => array( 'px', 'vh' ),
		'range'      => array(
			'px' => array( 'min' => 0, 'max' => 800 ),
			'vh' => array( 'min' => 0, 'max' => 100 ),
		),
		'selectors'  => array(
			'{{WRAPPER}} .ggmc-carousel-slide' => 'min-height: {{SIZE}}{{UNIT}};',
		),
	)
);

$this->add_responsive_control(
	'card_max_height',
	array(
		'label'      => __( 'Max Height', 'ggm-commerce' ),
		'type'       => \Elementor\Controls_Manager::SLIDER,
		'size_units' => array( 'px', 'vh' ),
		'range'      => array(
			'px' => array( 'min' => 0, 'max' => 800 ),
			'vh' => array( 'min' => 0, 'max' => 100 ),
		),
		'selectors'  => array(
			'{{WRAPPER}} .ggmc-carousel-slide' => 'max-height: {{SIZE}}{{UNIT}}; overflow: hidden;',
		),
	)
);

$this->add_control(
	'card_style_heading',
	array(
		'label'     => __( 'Card Style', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::HEADING,
		'separator' => 'before',
	)
);

$this->add_control(
	'card_background',
	array(
		'label'     => __( 'Background', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::COLOR,
		'default'   => '#ffffff',
		'selectors' => array(
			'{{WRAPPER}} .ggmc-carousel-card' => 'background-color: {{VALUE}};',
		),
	)
);

$this->add_group_control(
	\Elementor\Group_Control_Border::get_type(),
	array(
		'name'     => 'card_border',
		'label'    => __( 'Border', 'ggm-commerce' ),
		'selector' => '{{WRAPPER}} .ggmc-carousel-card',
	)
);

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

$this->add_group_control(
	\Elementor\Group_Control_Box_Shadow::get_type(),
	array(
		'name'     => 'card_box_shadow',
		'label'    => __( 'Box Shadow', 'ggm-commerce' ),
		'selector' => '{{WRAPPER}} .ggmc-carousel-card',
	)
);

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

$this->add_group_control(
	\Elementor\Group_Control_Box_Shadow::get_type(),
	array(
		'name'     => 'card_hover_box_shadow',
		'label'    => __( 'Hover Box Shadow', 'ggm-commerce' ),
		'selector' => '{{WRAPPER}} .ggmc-carousel-card:hover',
	)
);

$this->add_control(
	'card_hover_lift',
	array(
		'label'        => __( 'Hover Lift Effect', 'ggm-commerce' ),
		'type'         => \Elementor\Controls_Manager::SWITCHER,
		'default'      => '',
		'return_value' => 'yes',
		'selectors'    => array(
			'{{WRAPPER}} .ggmc-carousel-card' => 'transition: transform 0.3s ease, box-shadow 0.3s ease;',
			'{{WRAPPER}} .ggmc-carousel-card:hover' => 'transform: translateY(-4px);',
		),
	)
);

$this->end_controls_section();

// ──────────────────────────────────────────────
// SECTION: Peek / Adjacent Slides
// ──────────────────────────────────────────────
$this->start_controls_section(
	'peek_style',
	array(
		'label' => __( 'Peek / Adjacent Slides', 'ggm-commerce' ),
		'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
	)
);

$this->add_control(
	'peek_opacity',
	array(
		'label'     => __( 'Opacity', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::SLIDER,
		'range'     => array(
			'px' => array( 'min' => 0.1, 'max' => 1, 'step' => 0.05 ),
		),
		'default'   => array( 'size' => 0.7 ),
		'selectors' => array(
			'{{WRAPPER}} .ggmc-carousel-slide.is-peek' => 'opacity: {{SIZE}};',
		),
	)
);

$this->add_control(
	'peek_scale',
	array(
		'label'     => __( 'Scale', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::SLIDER,
		'range'     => array(
			'px' => array( 'min' => 0.7, 'max' => 1, 'step' => 0.05 ),
		),
		'default'   => array( 'size' => 1 ),
		'selectors' => array(
			'{{WRAPPER}} .ggmc-carousel-slide.is-peek' => 'transform: scale({{SIZE}});',
		),
	)
);

$this->add_control(
	'peek_blur',
	array(
		'label'     => __( 'Blur', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::SLIDER,
		'range'     => array(
			'px' => array( 'min' => 0, 'max' => 10, 'step' => 1 ),
		),
		'default'   => array( 'size' => 0 ),
		'selectors' => array(
			'{{WRAPPER}} .ggmc-carousel-slide.is-peek' => 'filter: blur({{SIZE}}px);',
		),
	)
);

$this->end_controls_section();

// ──────────────────────────────────────────────
// SECTION: Navigation Arrows
// ──────────────────────────────────────────────
$this->start_controls_section(
	'arrows_style',
	array(
		'label' => __( 'Navigation Arrows', 'ggm-commerce' ),
		'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
	)
);

$this->add_control(
	'arrows_show',
	array(
		'label'        => __( 'Show Arrows', 'ggm-commerce' ),
		'type'         => \Elementor\Controls_Manager::SWITCHER,
		'default'      => 'yes',
		'return_value' => 'yes',
	)
);

$this->add_control(
	'arrows_size',
	array(
		'label'     => __( 'Icon Size', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::SLIDER,
		'range'     => array(
			'px' => array( 'min' => 10, 'max' => 50 ),
		),
		'default'   => array( 'size' => 20 ),
		'selectors' => array(
			'{{WRAPPER}} .ggmc-carousel-nav i, {{WRAPPER}} .ggmc-carousel-nav svg' => 'font-size: {{SIZE}}px; width: {{SIZE}}px; height: {{SIZE}}px;',
		),
		'condition' => array( 'arrows_show' => 'yes' ),
	)
);

$this->add_control(
	'arrows_padding',
	array(
		'label'     => __( 'Button Padding', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::SLIDER,
		'range'     => array(
			'px' => array( 'min' => 5, 'max' => 30 ),
		),
		'default'   => array( 'size' => 12 ),
		'selectors' => array(
			'{{WRAPPER}} .ggmc-carousel-nav' => 'padding: {{SIZE}}px;',
		),
		'condition' => array( 'arrows_show' => 'yes' ),
	)
);

$this->start_controls_tabs(
	'arrows_color_tabs',
	array(
		'condition' => array( 'arrows_show' => 'yes' ),
	)
);

$this->start_controls_tab(
	'arrows_normal_tab',
	array( 'label' => __( 'Normal', 'ggm-commerce' ) )
);

$this->add_control(
	'arrows_color',
	array(
		'label'     => __( 'Color', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::COLOR,
		'default'   => '#ffffff',
		'selectors' => array(
			'{{WRAPPER}} .ggmc-carousel-nav' => 'color: {{VALUE}};',
			'{{WRAPPER}} .ggmc-carousel-nav svg' => 'fill: {{VALUE}};',
		),
	)
);

$this->add_control(
	'arrows_background',
	array(
		'label'     => __( 'Background', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::COLOR,
		'default'   => 'rgba(0,0,0,0.5)',
		'selectors' => array(
			'{{WRAPPER}} .ggmc-carousel-nav' => 'background-color: {{VALUE}};',
		),
	)
);

$this->end_controls_tab();

$this->start_controls_tab(
	'arrows_hover_tab',
	array( 'label' => __( 'Hover', 'ggm-commerce' ) )
);

$this->add_control(
	'arrows_hover_color',
	array(
		'label'     => __( 'Color', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => array(
			'{{WRAPPER}} .ggmc-carousel-nav:hover' => 'color: {{VALUE}};',
			'{{WRAPPER}} .ggmc-carousel-nav:hover svg' => 'fill: {{VALUE}};',
		),
	)
);

$this->add_control(
	'arrows_hover_background',
	array(
		'label'     => __( 'Background', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => array(
			'{{WRAPPER}} .ggmc-carousel-nav:hover' => 'background-color: {{VALUE}};',
		),
	)
);

$this->end_controls_tab();
$this->end_controls_tabs();

$this->add_group_control(
	\Elementor\Group_Control_Border::get_type(),
	array(
		'name'      => 'arrows_border',
		'label'     => __( 'Border', 'ggm-commerce' ),
		'selector'  => '{{WRAPPER}} .ggmc-carousel-nav',
		'condition' => array( 'arrows_show' => 'yes' ),
	)
);

$this->add_responsive_control(
	'arrows_border_radius',
	array(
		'label'      => __( 'Border Radius', 'ggm-commerce' ),
		'type'       => \Elementor\Controls_Manager::DIMENSIONS,
		'size_units' => array( 'px', '%' ),
		'default'    => array(
			'top'    => '50',
			'right'  => '50',
			'bottom' => '50',
			'left'   => '50',
			'unit'   => '%',
		),
		'selectors'  => array(
			'{{WRAPPER}} .ggmc-carousel-nav' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
		),
		'condition'  => array( 'arrows_show' => 'yes' ),
	)
);

$this->add_control(
	'arrows_position_offset',
	array(
		'label'     => __( 'Horizontal Offset', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::SLIDER,
		'range'     => array(
			'px' => array( 'min' => -50, 'max' => 50 ),
		),
		'default'   => array( 'size' => 15 ),
		'selectors' => array(
			'{{WRAPPER}} .ggmc-carousel-prev' => 'left: {{SIZE}}px;',
			'{{WRAPPER}} .ggmc-carousel-next' => 'right: {{SIZE}}px;',
		),
		'condition' => array( 'arrows_show' => 'yes' ),
	)
);

$this->add_control(
	'arrows_vertical_position',
	array(
		'label'     => __( 'Vertical Position (%)', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::SLIDER,
		'range'     => array(
			'px' => array( 'min' => 0, 'max' => 100 ),
		),
		'default'   => array( 'size' => 50 ),
		'selectors' => array(
			'{{WRAPPER}} .ggmc-carousel-nav' => 'top: {{SIZE}}%;',
		),
		'condition' => array( 'arrows_show' => 'yes' ),
	)
);

$this->add_control(
	'arrows_prev_icon',
	array(
		'label'     => __( 'Previous Arrow Icon', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::ICONS,
		'default'   => array(
			'value'   => 'eicon-chevron-left',
			'library' => 'eicons',
		),
		'condition' => array( 'arrows_show' => 'yes' ),
	)
);

$this->add_control(
	'arrows_next_icon',
	array(
		'label'     => __( 'Next Arrow Icon', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::ICONS,
		'default'   => array(
			'value'   => 'eicon-chevron-right',
			'library' => 'eicons',
		),
		'condition' => array( 'arrows_show' => 'yes' ),
	)
);

$this->end_controls_section();

// ──────────────────────────────────────────────
// SECTION: Dot Indicators
// ──────────────────────────────────────────────
$this->start_controls_section(
	'dots_style',
	array(
		'label' => __( 'Dot Indicators', 'ggm-commerce' ),
		'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
	)
);

$this->add_control(
	'dots_show',
	array(
		'label'        => __( 'Show Dots', 'ggm-commerce' ),
		'type'         => \Elementor\Controls_Manager::SWITCHER,
		'default'      => 'yes',
		'return_value' => 'yes',
	)
);

$this->add_control(
	'dots_position',
	array(
		'label'     => __( 'Position', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::SELECT,
		'default'   => 'below',
		'options'   => array(
			'below'    => __( 'Below Carousel', 'ggm-commerce' ),
			'overlaid' => __( 'Overlaid on Bottom', 'ggm-commerce' ),
		),
		'condition' => array( 'dots_show' => 'yes' ),
	)
);

$this->add_control(
	'dots_offset',
	array(
		'label'     => __( 'Offset', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::SLIDER,
		'range'     => array(
			'px' => array( 'min' => 0, 'max' => 50 ),
		),
		'default'   => array( 'size' => 15 ),
		'selectors' => array(
			'{{WRAPPER}} .ggmc-carousel-dots.position-below'    => 'margin-top: {{SIZE}}px;',
			'{{WRAPPER}} .ggmc-carousel-dots.position-overlaid' => 'bottom: {{SIZE}}px;',
		),
		'condition' => array( 'dots_show' => 'yes' ),
	)
);

$this->add_control(
	'dots_size',
	array(
		'label'     => __( 'Size', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::SLIDER,
		'range'     => array(
			'px' => array( 'min' => 4, 'max' => 40 ),
		),
		'default'   => array( 'size' => 10 ),
		'selectors' => array(
			'{{WRAPPER}} .ggmc-carousel-dots .ggmc-carousel-dot' => 'width: {{SIZE}}px; height: {{SIZE}}px;',
		),
		'condition' => array( 'dots_show' => 'yes' ),
	)
);

$this->add_control(
	'dots_spacing',
	array(
		'label'     => __( 'Spacing', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::SLIDER,
		'range'     => array(
			'px' => array( 'min' => 2, 'max' => 20 ),
		),
		'default'   => array( 'size' => 8 ),
		'selectors' => array(
			'{{WRAPPER}} .ggmc-carousel-dots' => 'gap: {{SIZE}}px;',
		),
		'condition' => array( 'dots_show' => 'yes' ),
	)
);

$this->add_control(
	'dots_color',
	array(
		'label'     => __( 'Color', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::COLOR,
		'default'   => 'rgba(0,0,0,0.3)',
		'selectors' => array(
			'{{WRAPPER}} .ggmc-carousel-dots .ggmc-carousel-dot' => 'background-color: {{VALUE}};',
		),
		'condition' => array( 'dots_show' => 'yes' ),
	)
);

$this->add_control(
	'dots_active_color',
	array(
		'label'     => __( 'Active Color', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::COLOR,
		'default'   => '#2563eb',
		'selectors' => array(
			'{{WRAPPER}} .ggmc-carousel-dots .ggmc-carousel-dot.active' => 'background-color: {{VALUE}};',
		),
		'condition' => array( 'dots_show' => 'yes' ),
	)
);

$this->add_control(
	'dots_hover_color',
	array(
		'label'     => __( 'Hover Color', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => array(
			'{{WRAPPER}} .ggmc-carousel-dots .ggmc-carousel-dot:hover' => 'background-color: {{VALUE}};',
		),
		'condition' => array( 'dots_show' => 'yes' ),
	)
);

$this->add_control(
	'dots_shape',
	array(
		'label'     => __( 'Shape', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::SELECT,
		'default'   => 'circle',
		'options'   => array(
			'circle' => __( 'Circle', 'ggm-commerce' ),
			'square' => __( 'Square', 'ggm-commerce' ),
			'pill'   => __( 'Pill', 'ggm-commerce' ),
		),
		'condition' => array( 'dots_show' => 'yes' ),
	)
);

$this->add_control(
	'dots_active_width',
	array(
		'label'       => __( 'Active Width', 'ggm-commerce' ),
		'type'        => \Elementor\Controls_Manager::SLIDER,
		'range'       => array(
			'px' => array( 'min' => 15, 'max' => 40 ),
		),
		'default'     => array( 'size' => 20 ),
		'selectors'   => array(
			'{{WRAPPER}} .ggmc-carousel-dots .ggmc-carousel-dot.active' => 'width: {{SIZE}}px;',
		),
		'condition'   => array(
			'dots_show'  => 'yes',
			'dots_shape' => 'pill',
		),
	)
);

$this->end_controls_section();

// ──────────────────────────────────────────────
// SECTION: Image
// ──────────────────────────────────────────────
$this->start_controls_section(
	'image_style',
	array(
		'label'     => __( 'Image', 'ggm-commerce' ),
		'tab'       => \Elementor\Controls_Manager::TAB_STYLE,
		'condition' => array( 'show_image' => 'yes' ),
	)
);

$this->add_control(
	'image_size',
	array(
		'label'   => __( 'Image Quality', 'ggm-commerce' ),
		'type'    => \Elementor\Controls_Manager::SELECT,
		'default' => 'large',
		'options' => array(
			'thumbnail' => __( 'Thumbnail', 'ggm-commerce' ),
			'medium'    => __( 'Medium', 'ggm-commerce' ),
			'large'     => __( 'Large', 'ggm-commerce' ),
			'full'      => __( 'Full', 'ggm-commerce' ),
		),
	)
);

$this->add_responsive_control(
	'image_height',
	array(
		'label'      => __( 'Height', 'ggm-commerce' ),
		'type'       => \Elementor\Controls_Manager::SLIDER,
		'size_units' => array( 'px' ),
		'range'      => array(
			'px' => array( 'min' => 100, 'max' => 500 ),
		),
		'default'    => array( 'size' => 250, 'unit' => 'px' ),
		'selectors'  => array(
			'{{WRAPPER}} .carousel-card-image' => 'height: {{SIZE}}{{UNIT}};',
		),
		'condition'  => array(
			'card_layout!' => 'horizontal',
		),
	)
);

$this->add_control(
	'image_object_fit',
	array(
		'label'     => __( 'Object Fit', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::SELECT,
		'default'   => 'cover',
		'options'   => array(
			'cover'   => __( 'Cover', 'ggm-commerce' ),
			'contain' => __( 'Contain', 'ggm-commerce' ),
			'fill'    => __( 'Fill', 'ggm-commerce' ),
		),
		'selectors' => array(
			'{{WRAPPER}} .carousel-card-image img' => 'object-fit: {{VALUE}};',
		),
	)
);

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

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

$this->end_controls_section();

// ──────────────────────────────────────────────
// SECTION: Badges
// ──────────────────────────────────────────────
$this->start_controls_section(
	'badge_style',
	array(
		'label'     => __( 'Badges', 'ggm-commerce' ),
		'tab'       => \Elementor\Controls_Manager::TAB_STYLE,
		'condition' => array( 'show_badge' => 'yes' ),
	)
);

$this->add_control(
	'badge_featured_bg',
	array(
		'label'     => __( 'Featured Background', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::COLOR,
		'default'   => '#f59e0b',
		'selectors' => array(
			'{{WRAPPER}} .badge-featured' => 'background-color: {{VALUE}};',
		),
	)
);

$this->add_control(
	'badge_featured_color',
	array(
		'label'     => __( 'Featured Text', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::COLOR,
		'default'   => '#ffffff',
		'selectors' => array(
			'{{WRAPPER}} .badge-featured' => 'color: {{VALUE}};',
		),
	)
);

$this->add_control(
	'badge_sale_bg',
	array(
		'label'     => __( 'Sale Background', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::COLOR,
		'default'   => '#ef4444',
		'selectors' => array(
			'{{WRAPPER}} .badge-sale' => 'background-color: {{VALUE}};',
		),
	)
);

$this->add_control(
	'badge_sale_color',
	array(
		'label'     => __( 'Sale Text', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::COLOR,
		'default'   => '#ffffff',
		'selectors' => array(
			'{{WRAPPER}} .badge-sale' => 'color: {{VALUE}};',
		),
	)
);

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

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

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

$this->end_controls_section();

// ──────────────────────────────────────────────
// SECTION: Title
// ──────────────────────────────────────────────
$this->start_controls_section(
	'title_style',
	array(
		'label'     => __( 'Title', 'ggm-commerce' ),
		'tab'       => \Elementor\Controls_Manager::TAB_STYLE,
		'condition' => array( 'show_title' => 'yes' ),
	)
);

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

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

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

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

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

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

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

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

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

$this->end_controls_section();

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

$this->add_control(
	'categories_color',
	array(
		'label'     => __( 'Color', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => array(
			'{{WRAPPER}} .carousel-product-categories, {{WRAPPER}} .carousel-product-categories a' => 'color: {{VALUE}};',
		),
	)
);

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

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

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

$this->add_control(
	'categories_box_heading',
	array(
		'label'     => __( 'Categories Box', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::HEADING,
		'separator' => 'before',
	)
);

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

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

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

$this->end_controls_section();

// ──────────────────────────────────────────────
// SECTION: Price
// ──────────────────────────────────────────────
$this->start_controls_section(
	'price_style',
	array(
		'label'     => __( 'Price', 'ggm-commerce' ),
		'tab'       => \Elementor\Controls_Manager::TAB_STYLE,
		'condition' => array( 'show_price' => 'yes' ),
	)
);

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

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

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

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

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

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

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

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

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

$this->end_controls_section();

// ──────────────────────────────────────────────
// SECTION: Description
// ──────────────────────────────────────────────
$this->start_controls_section(
	'description_style',
	array(
		'label'     => __( 'Description', 'ggm-commerce' ),
		'tab'       => \Elementor\Controls_Manager::TAB_STYLE,
		'condition' => array( 'show_description' => 'yes' ),
	)
);

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

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

$this->add_control(
	'description_line_clamp',
	array(
		'label'     => __( 'Max Lines', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::NUMBER,
		'default'   => 2,
		'min'       => 1,
		'max'       => 5,
		'selectors' => array(
			'{{WRAPPER}} .carousel-product-description' => 'display: -webkit-box; -webkit-line-clamp: {{VALUE}}; -webkit-box-orient: vertical; overflow: hidden;',
		),
	)
);

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

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

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

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

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

$this->end_controls_section();

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

$this->add_control(
	'stock_in_color',
	array(
		'label'     => __( 'In Stock Color', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::COLOR,
		'default'   => '#10b981',
		'selectors' => array(
			'{{WRAPPER}} .carousel-product-stock .in-stock' => 'color: {{VALUE}};',
		),
	)
);

$this->add_control(
	'stock_low_color',
	array(
		'label'     => __( 'Low Stock Color', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::COLOR,
		'default'   => '#f59e0b',
		'selectors' => array(
			'{{WRAPPER}} .carousel-product-stock .low-stock' => 'color: {{VALUE}};',
		),
	)
);

$this->add_control(
	'stock_out_color',
	array(
		'label'     => __( 'Out of Stock Color', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::COLOR,
		'default'   => '#ef4444',
		'selectors' => array(
			'{{WRAPPER}} .carousel-product-stock .out-of-stock' => 'color: {{VALUE}};',
		),
	)
);

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

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

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

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

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

$this->end_controls_section();

// ──────────────────────────────────────────────
// SECTION: Attributes
// ──────────────────────────────────────────────
$this->start_controls_section(
	'attributes_style',
	array(
		'label'     => __( 'Attributes', 'ggm-commerce' ),
		'tab'       => \Elementor\Controls_Manager::TAB_STYLE,
		'condition' => array( 'show_attributes' => 'yes' ),
	)
);

$this->add_control(
	'attr_label_color',
	array(
		'label'     => __( 'Label Color', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => array(
			'{{WRAPPER}} .carousel-attr-label' => 'color: {{VALUE}};',
		),
	)
);

$this->add_group_control(
	\Elementor\Group_Control_Typography::get_type(),
	array(
		'name'     => 'attr_label_typography',
		'label'    => __( 'Label Typography', 'ggm-commerce' ),
		'selector' => '{{WRAPPER}} .carousel-attr-label',
	)
);

$this->add_control(
	'attr_value_color',
	array(
		'label'     => __( 'Value Color', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => array(
			'{{WRAPPER}} .carousel-attr-value' => 'color: {{VALUE}};',
		),
	)
);

$this->add_group_control(
	\Elementor\Group_Control_Typography::get_type(),
	array(
		'name'     => 'attr_value_typography',
		'label'    => __( 'Value Typography', 'ggm-commerce' ),
		'selector' => '{{WRAPPER}} .carousel-attr-value',
	)
);

$this->add_responsive_control(
	'attr_gap',
	array(
		'label'      => __( 'Item Spacing', 'ggm-commerce' ),
		'type'       => \Elementor\Controls_Manager::SLIDER,
		'size_units' => array( 'px' ),
		'range'      => array(
			'px' => array( 'min' => 0, 'max' => 30 ),
		),
		'selectors'  => array(
			'{{WRAPPER}} .carousel-product-attributes' => 'gap: {{SIZE}}{{UNIT}};',
		),
	)
);

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

$this->add_control(
	'attr_box_heading',
	array(
		'label'     => __( 'Attributes Box', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::HEADING,
		'separator' => 'before',
	)
);

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

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

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

$this->end_controls_section();

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

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

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

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

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

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

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

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

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

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

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

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

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

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

$this->end_controls_section();

// ──────────────────────────────────────────────
// SECTION: Actions / Buttons
// ──────────────────────────────────────────────
$this->start_controls_section(
	'actions_style',
	array(
		'label'     => __( 'Actions / Buttons', 'ggm-commerce' ),
		'tab'       => \Elementor\Controls_Manager::TAB_STYLE,
		'condition' => array( 'show_add_to_cart' => 'yes' ),
	)
);

$this->add_control(
	'button_size',
	array(
		'label'   => __( 'Button Size', 'ggm-commerce' ),
		'type'    => \Elementor\Controls_Manager::SELECT,
		'default' => 'medium',
		'options' => array(
			'small'  => __( 'Small', 'ggm-commerce' ),
			'medium' => __( 'Medium', 'ggm-commerce' ),
			'large'  => __( 'Large', 'ggm-commerce' ),
		),
	)
);

$this->start_controls_tabs( 'button_color_tabs' );

$this->start_controls_tab(
	'button_normal_tab',
	array( 'label' => __( 'Normal', 'ggm-commerce' ) )
);

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

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

$this->end_controls_tab();

$this->start_controls_tab(
	'button_hover_tab',
	array( 'label' => __( 'Hover', 'ggm-commerce' ) )
);

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

$this->add_control(
	'button_hover_background',
	array(
		'label'     => __( 'Background', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => array(
			'{{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_Typography::get_type(),
	array(
		'name'     => 'button_typography',
		'label'    => __( 'Typography', 'ggm-commerce' ),
		'selector' => '{{WRAPPER}} .ggmc-add-to-cart-btn',
	)
);

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

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

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

$this->end_controls_section();
