/*
Theme Name: Shopluxecartel
Theme URI: 
Description: Shopluxecartel
Author: CommerceGurus
Author URI: 
Template: shoptimizer
Version: 1.2.2
License:         	GNU General Public License v2 or later
License URI:     	http://www.gnu.org/licenses/gpl-2.0.html
*/




/* --- The Card Container --- */
/* Add a subtle border and transition for all effects */
.crochet-card {
  position: relative; /* Essential for the badge */
  border: 1px solid #e5e7eb; /* Subtle default border like the original */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden; /* This is VERY important to contain the zooming image */
}

/* --- Card Hover Effects --- */
/* Add the scale and shadow effect on hover */
.crochet-card:hover {
  transform: scale(1.05); /* The card zoom effect */
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* A warm shadow */
}

/* --- Image Styling & Hover Effect --- */
/* Style the image container */
.crochet-card .crochet-card-image .elementor-widget-container {
  overflow: hidden; /* Keep the image inside the rounded corners */
}

/* Add transition to the image itself */
.crochet-card .crochet-card-image img {
  transition: transform 0.3s ease;
}

/* The image zoom effect when hovering the PARENT card */
.crochet-card:hover .crochet-card-image img {
  transform: scale(1.1); /* The image zoom effect */
}




/////

/* ===== Promo Card (Elementor Free) ===== */

/* Card container + hover */
.promo-card{
  position:relative;                 /* anchor for the badge */
  background:#fff;
  border:1px solid #e9ecef;
  border-radius:16px;
  padding:25px;
  transition:box-shadow .25s, transform .25s;
}
.promo-card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(0,0,0,.08);
}

/* Top-right red badge pill */
.promo-badge{
  position:absolute;
  top:10px; right:20px;
  background:#e03131; color:#fff;
  font-weight:800; font-size:13px; letter-spacing:.2px;
  padding:10px 16px;
  border-radius:999px;               /* pill shape */
  line-height:1; white-space:nowrap;
  z-index:5;
}

/* Eyebrow text (Offer of the Week) */
.promo-eyebrow{
  font-size:14px; font-weight:600; letter-spacing:.02em;
  color:#495057; margin-bottom:16px;
}

/* Countdown styling */
.promo-countdown{
  display:flex; gap:28px; align-items:flex-end;
  margin:14px 0 24px;
}
.promo-countdown .cd-item{
  display:flex; flex-direction:column; align-items:flex-start;
}
.promo-countdown .num{
  display:block; font-size:28px; font-weight:800;
}
.promo-countdown .lab{
  display:block; font-size:12px; color:#495057;
}

/* Clock line (icon + "Offer ends in:") */
.promo-timerline{
  display:flex; align-items:center; gap:8px;
  color:#495057; margin-top:8px; margin-bottom:4px;
}

/* Buttons row */
.promo-actions{
  display:flex; gap:16px; align-items:center;
  margin-top:12px;
}
.promo-actions .elementor-button{
  padding:14px 22px; border-radius:12px;
}
/* Outline style for the secondary button */
.promo-actions .elementor-button.elementor-button--outline{
  background:transparent; border:1px solid #ced4da;
}
.promo-actions .elementor-button.elementor-button--outline:hover{
  border-color:#111; color:#111;
}

/* Right column (image side) */
.promo-right{
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  position:relative;
}
.promo-right .feat-label{
  color:#495057; font-weight:600; margin-bottom:12px;
}

/* Responsive tweaks */
@media (max-width: 767px){
  .promo-card{ padding:28px; }
  .promo-countdown{ gap:16px; }
  .promo-badge{
    top:12px; right:12px; font-size:12px; padding:8px 12px;
  }
  .promo-actions{ flex-wrap:wrap; }
}