:root{
  --card-border-radius:6px;
  --card-box-shadow:0 2px 4px rgba(0,0,0,.1);
  --border-radius:4px;
  --border-color:#e5e7eb;
  --box-shadow: 0 0 2px rgb(0 0 0 / 0.2),0 4px 6px -4px rgb(0 0 0 / 0.15);
}

/* 
  *
  * Promotion Card 
  *
*/
.promotion-card-container {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}
.promotion-card-image {
display: block;
position: relative;
}
.promotion-card-image:first-child img {
  width:100%;
}
.promotion-card-image .image{
display: block;
position: relative;
margin:0;
}
.promotion-card .card-notification{
  display: none;
  background: #ffffffe8;
  color: #cd0000;
  padding: .35rem 1rem;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 1rem;
  border-radius: 6px 0 0 7px;
} 
.promotion-card .card-notification span{
  animation: blinking 1s infinite;
}
.promotion-card.featured.noti .card-notification{
  display: block!important;
}
.promotion-card .featured h3::before{
  content: "ขายดี";
  background: #CD0000;
  color: #fff;
  font-size: 0.8em;
  padding: .05rem .25rem;
  border-radius: 4px;
  margin-right: .25rem;
}
.promotion-card .card-content{
padding:.75rem 1rem;
}
.promotion-card .card-content h3{
margin:0;
margin-bottom:5px;
font-size:1.1em;
font-weight:400;
line-height:1.2em;
color:#222;
}
.promotion-card .card-info{
display:flex;
justify-content:space-between;
border-bottom:1px solid #f3f3f3;
padding:0 0 .35rem;
font-weight:300;
color:#969696;
}
.promotion-card .card-info-left{
font-size:0.9em;
font-weight:200;
}
.promotion-card .info{
align-items: flex-start;
display: flex;
}
.promotion-card .card-list{
padding-top: .35rem;
font-size: 0.9em;
font-weight: 200;
color:#969696;
}
.promotion-card .card-footer{
display:flex;
justify-content:space-between;
align-items:center;
padding:.35rem 0 0;
}
.promotion-card .card-footer-pricing{
display:flex;
flex-direction:column;
}
.promotion-card .card-footer-button{
display:flex;
}

.card-button{
  font-size:1.15em;
  padding:.5rem 1.5rem;
  border-radius:var(--card-border-radius);
  box-shadow:var(--card-box-shadow)!important;
}
.card-button:hover{
  color: #fff;
  transition: all 0.5s;
}

/* Pricing */
.promotion-card .price-regular{
text-decoration: line-through;
font-size:0.9em;
font-weight:200;
color:#969696;
}
.promotion-card .price-regular:before{
content:"ปกติ ";
}
.promotion-card .price-sale{
color:#CD0000;
font-size:1.2em;
}
.promotion-card .price-sale:after{
content:" บาท";
}

.promotion-card .promotion-star{
  color: #FFC107;
  display: none;
}
.promotion-card .star-on .promotion-star{
display: block;
}
@keyframes blinking {
  0%{
      opacity: 0;
  }
}

/* 
  *
  * Promotion Field
  *
*/
.promotion-field-wrapper.items-visible .promotion-items{
  display: block;
}
.promotion-field-wrapper > .promotion-field{
  border: 1px solid var(--m-color-gray-300, #D2D5DA)!important;
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  gap: 0.75rem;
  padding: 1rem 0;
  cursor: pointer;
  border-radius: var(--card-border-radius);
  overflow: hidden;
}

.promotion-field-wrapper > .promotion-field.selected{
  border-color: #39b54a!important;
  background-color: #39b54a08!important;
  box-shadow: var(--card-box-shadow);
}
.promotion-field.selected .icon{
  opacity: 1;
}
.promotion-field-heading, .promotion-field-footer, .promotion-field-notification{
  padding: 0 1rem;
}
.promotion-field-content{
  display: flex;
  flex-direction: column;
}

.promotion-field-heading{
  position: relative;
  padding-right: 50px;
}

.promotion-field-heading h3{
    margin: 0!important;
    font-size: 1em;
    line-height: 1.3em;
}
.promotion-field-heading .promotion-items {
  font-size: 0.8em;
  display: none;
  margin-top: 0.25rem;
}


.promotion-field-heading .icon{
    position: absolute;
    top: 0;
    right: 1rem;
    opacity: 0;
}
.promotion-field-heading .icon svg{
    fill:#39b54a;
}

.promotion-field-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.25rem;
}
.promotion-field-footer .sale-price{
    color:#BB0000;
    font-weight: bold;
}
.promotion-field-footer .sale-price::after{
    content: '฿';
}
.promotion-field-footer .regular-price{
    text-decoration: line-through;
    opacity: 0.6;
    color: #333!important;
}
.tag-wrapper{
  flex:1 1 auto;
}
.promotion-field-footer .tag{
    background-color: #FBEEEE;
    color: #BB0000;
    width: fit-content;
    padding: 0.1rem 0.5rem;
    border-radius: 30px;
    display: block;
    float: right;
    font-size: 0.8em;
    font-weight: bold;
}
.promotion-field-notification{
  max-height: 0;
  transition: max-height 0.2s linear;
}
.promotion-field-notification .notification-content{
  background: #e7f3e3;
  color: #3a8735;
  padding: 0.375rem 0.5rem;
  border-radius: 4px;
  font-size: 0.85em;
  display: flex;
  flex-direction: row;
  align-items: center;
  opacity: 0;
  gap: 0.5em;
  margin-top: 0.25rem;
  transition: visibility 1s linear,opacity 0.2s linear;
}
.promotion-field-notification .notification-content svg{
  width: 18px;
  height: 18px;
  fill: #3a8736;
}
.promotion-field.selected .promotion-field-notification {
  max-height: 50px;
  transition: max-height 0.3s linear;
}
.promotion-field.selected .promotion-field-notification .notification-content{
  visibility: visible;
  opacity: 1;
  transition: visibility 5s linear,opacity 0.5s linear;
}

/* Hide Field_1 */
.elementor-field-type-textarea.elementor-field-group-field_1{
display: none;
}
/* 
  *
  * Countdown Auto
  *
*/
.countdown-wrapper {
  display: flex;
  justify-content: center;
  margin-right: auto;
  margin-left: auto;
}
.countdown-item {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  text-align: center;
  box-shadow: var(--card-box-shadow);
  border-radius: var(--card-border-radius);
  padding: 10px;
}
.countdown-digits {
  font-size: 45px;
  color: #9d1c00;
}
.countdown-label {
  font-size: 20px;
}
@media screen and (max-width: 575.98px) {
  .countdown-digits {
      font-size: 35px;
      line-height: 1.2;
  }
  .countdown-label {
      font-size: 16px;
  }
}

/* 
  *
  * User Review
  *
*/

.user-review-container{
  display: flex;
  flex-direction: column;
}

.user-review-card{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex: 0 1 auto;
  width: 100%;
  gap:10px;
}



.user-review-card .user-image figure{
  flex: none;
  width: 36px;
  height: 36px;
}

.user-review-card .user-image figure img{
  height: 100%;
  width: auto;
  object-fit: cover;
  border-radius: 100px;
}
.user-review-card .review-name{
  margin: 0;
}

/* 
  *
  * Product Card * New *
  *
*/
.product-wrapper{
  display:flex;
  flex-direction:row;
  flex-wrap: wrap;
  justify-content: space-between;
  gap:10px;
}
.product-card{
  display: flex;
  flex-direction: column;
}
/* Image */
.product-image {
  width: 100%;
}
.product-image img{
  width: 100%;
  margin-bottom: -6px;
}

/* Content */
.product-countdown{
  display:flex;
  justify-content: space-between;
  align-content: center;
  align-items:center;
  flex-direction: row;
  background: #BB0000;
  color:#fff;
  padding: 10px;
  margin: 0rem -1rem 1.5rem -1rem;
}
.product-countdown-wrapper{
  display:flex;
}
.product-countdown + .product-progress-bar{
  margin:0 0 10px;
}
.product-progress-bar{
  display:block;
  height:15px;
  border-radius:100px;
  background:#ddd;
  margin:20px 0 10px;
}    
.product-progress-bar .progress{
  display:block;
  height:15px;
  border-radius:100px;
  background: #BB0000;
  transition:all linear 0.6s;
  position: relative;
}
.product-progress-bar img{
  width:28px;
  height:28px;
  float:right;
  margin-top:-10px;
  margin-right:-10px;
  animation: fire 0.5s alternate infinite;
}
.product-progress-bar .progress-text{
  position: absolute;
  right: 25px;
  font-size: 12px;
  color: #fff;
}

.product-heading{
  padding: 0 1rem;
}
.product-heading h3{
  font-size: 1em;
  margin-top:1rem;
  line-height: 1.4em;
}

.product-short-detail{
  display:flex;
  justify-content:space-between;
  align-items: center;
}
.product-short-detail .users{
  flex:1 1 auto;
  text-align: right;
}
.product-short-detail .product-toggle{
  text-align: left;
}
.product-short-detail .product-rating{
  color: #ffc107!important;
}
.product-toggle:hover{
  cursor: pointer;
}
.product-toggle svg{
  width: 12px;
  transition: rotate 0.5s linear;
}
.product-toggle.rotate svg{
  transform: rotate(180deg);
  transition: rotate 0.5s linear;
}
.user-counter{
  font-weight: bold;
  color:#BB0000!important;
}
.product-items{
  max-height: 0;
  overflow:hidden;
  transition: all 0.5s ease-out;
  margin: 0.5rem 0;
}
.product-items.visible{
  max-height: 250px;
  transition: all 0.5s ease-in;
}

.product-footer{
  display:flex;
  justify-content:space-between;
  align-content: center;
  align-items: center;
  padding:0.75rem 1rem;
  border-top: 1px solid #ececec;
}
.product-footer .price-wrapper{
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  flex: 1 1 50%;
  gap: 10px;
}
.product-footer .discount{
  line-height: 1em;
}
.product-footer .price-group{
  display: flex;
  flex-direction: column;
}
.product-footer .regular-price{
  font-size: 0.65em;
  text-decoration: line-through;
  color: #737373;
}
.product-footer .regular-price::before{
  content:'ปกติ ';
}
.product-footer .sale-price{
  font-weight: bold;
}
.product-footer .sale-price::after{
  content:'฿';
}
.product-footer .button{
  font-weight: bold;
  border:none;
  flex: 1 1 50%;
  text-align: center;
  line-height: 1em;
  padding: 12px;
  border-radius: 4px;
}

@keyframes fire{
  100%{
      transform:skew(-5deg) rotateX(20deg);
      transform-origin:bottom center;
  }
}