/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 3.0.3
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* Accent tokens */
:root {
  --accent-pink:   #ff4fd8;
  --accent-green:  #36ff6b;
  --accent-yellow: #ffe44d;
  --accent-orange: #ff8000;
  --accent-red: #ff0000;
  --accent-blue: #0000ff;
  --accent-violet: #7F00FF;
}

/* Carousel */
.carousel__card[data-color="pink"]   { 
  border-color: var(--accent-pink); 
}
.carousel__card[data-color="green"]  { 
  border-color: var(--accent-green); 
}
.carousel__card[data-color="yellow"] { 
  border-color: var(--accent-yellow); 
}
.carousel__card[data-color="orange"] { 
  border-color: var(--accent-orange); 
}
.carousel__card[data-color="red"] { 
  border-color: var(--accent-red); 
}
.carousel__card[data-color="blue"] { 
  border-color: var(--accent-blue); 
}
.carousel__card[data-color="violet"] { 
  border-color: var(--accent-violet); 
}

/* Single product page */
.product-accent-pink .product-main {
  border-color: var(--accent-pink);
  box-shadow: 0 0 30px #ff4fd880;
}

.product-accent-green .product-main {
  border-color: var(--accent-green);
  box-shadow: 0 0 30px #36ff6b80;
}

.product-accent-yellow .product-main {
  border-color: var(--accent-yellow);
  box-shadow: 0 0 30px #ffe44d80;
}

.product-accent-orange .product-main {
  border-color: var(--accent-orange);
  box-shadow: 0 0 30px #ff800080;
}

.product-accent-red .product-main {
  border-color: var(--accent-red);
  box-shadow: 0 0 30px #ff000080;
}

.product-accent-blue .product-main {
  border-color: var(--accent-blue);
  box-shadow: 0 0 30px #0000ff80;
}

.product-accent-violet .product-main {
  border-color: var(--accent-violet);
  box-shadow: 0 0 30px #7F00FF80;
}

/**
 * Shop Page
 */

/* Base reset (important for Elementor) */
.woocommerce ul.products li.product {
  border: 2px solid transparent;
  border-radius: 16px;
  transition: border-color 250ms ease, box-shadow 250ms ease, transform 250ms ease;
  padding: 16px 13px !important;
}


/* Accent borders */
.woocommerce ul.products li.product.product-accent-pink {
  border-color: var(--accent-pink);
  box-shadow: 0 0 30px #ff4fd880;
}
.woocommerce ul.products li.product.product-accent-green {
  border-color: var(--accent-green);
  box-shadow: 0 0 30px #36ff6b80;
}
.woocommerce ul.products li.product.product-accent-yellow {
  border-color: var(--accent-yellow);
  box-shadow: 0 0 30px #ffe44d80;
}

.woocommerce ul.products li.product.product-accent-orange {
  border-color: var(--accent-orange);
  box-shadow: 0 0 30px #ff800080;
}

.woocommerce ul.products li.product.product-accent-red {
  border-color: var(--accent-red);
  box-shadow: 0 0 30px #ff000080;
}

.woocommerce ul.products li.product.product-accent-blue {
  border-color: var(--accent-blue);
  box-shadow: 0 0 30px #0000ff80;
}

.woocommerce ul.products li.product.product-accent-violet {
  border-color: var(--accent-violet);
  box-shadow: 0 0 30px #7F00FF80;
}

/* Optional subtle lift */
.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
}


/* =========================
   PRODUCT ACCENT BUTTONS
   ========================= */

/* Pink */
.product-accent-pink .add_to_cart_button,
.product-accent-pink .button,
.product-accent-pink .elementor-button {
  color: #ff4fd8 !important;
  border-color: #ff4fd8 !important;
}

.product-accent-pink .add_to_cart_button:hover,
.product-accent-pink .button:hover,
.product-accent-pink .elementor-button:hover {
  background-color: #ff4fd8 !important;
  color: #fff !important;
}

/* Green */
.product-accent-green .add_to_cart_button,
.product-accent-green .button,
.product-accent-green .elementor-button {
  color: #36ff6b !important;
  border-color: #36ff6b !important;
}

.product-accent-green .add_to_cart_button:hover,
.product-accent-green .button:hover,
.product-accent-green .elementor-button:hover {
  background-color: #36ff6b !important;
  color: #fff !important;
}

/* Yellow */
.product-accent-yellow .add_to_cart_button,
.product-accent-yellow .button,
.product-accent-yellow .elementor-button {
  color: #ffe44d !important;
  border-color: #ffe44d !important;
}

.product-accent-yellow .add_to_cart_button:hover,
.product-accent-yellow .button:hover,
.product-accent-yellow .elementor-button:hover {
  background-color: #ffe44d !important;
  color: #fff !important;
}

/* Orange */
.product-accent-orange .add_to_cart_button,
.product-accent-orange .button,
.product-accent-orange .elementor-button {
  color: #ff8000 !important;
  border-color: #ff8000 !important;
}

.product-accent-orange .add_to_cart_button:hover,
.product-accent-orange .button:hover,
.product-accent-orange .elementor-button:hover {
  background-color: #ff8000 !important;
  color: #fff !important;
}

/* Red */
.product-accent-red .add_to_cart_button,
.product-accent-red .button,
.product-accent-red .elementor-button {
  color: #ff0000 !important;
  border-color: #ff0000 !important;
}

.product-accent-red .add_to_cart_button:hover,
.product-accent-red .button:hover,
.product-accent-red .elementor-button:hover {
  background-color: #ff0000 !important;
  color: #fff !important;
}

/* Blue */
.product-accent-blue .add_to_cart_button,
.product-accent-blue .button,
.product-accent-blue .elementor-button {
  color: #0000ff !important;
  border-color: #0000ff !important;
}

.product-accent-blue .add_to_cart_button:hover,
.product-accent-blue .button:hover,
.product-accent-blue .elementor-button:hover {
  background-color: #0000ff !important;
  color: #fff !important;
}

/* Violet */
.product-accent-violet .add_to_cart_button,
.product-accent-violet .button,
.product-accent-violet .elementor-button {  
  color: #7F00FF !important;
  border-color: #7F00FF !important;
}

.product-accent-violet .add_to_cart_button:hover,
.product-accent-violet .button:hover,
.product-accent-violet .elementor-button:hover {
  background-color: #7F00FF !important;
  color: #fff !important;
}