/*
Theme Name: Flatsome Child
Description: Child theme for Flatsome - Homepower Theme Migration
Author: Elior & Antigravity
Template: flatsome
Version: 1.0.0
Text Domain: flatsome-child
*/

/* ==========================================================================
   === HIỆU ỨNG THẺ VOUCHER NGANG GỐC MÀU CYAN/YELLOW ===
   ========================================================================== */

.hp-voucher-card {
  position: relative;
  display: flex;
  background-color: #ffffff;
  border: none;
  border-radius: 8px;
  overflow: visible !important; /* Cần thiết để lộ răng cưa khía biên dọc */
  transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px -2px rgba(0, 95, 163, 0.06), 0 2px 6px -1px rgba(0, 0, 0, 0.03);
  isolation: isolate; /* Tạo stacking context riêng biệt */
}

/* Các nửa khía hình tròn đục lỗ răng cưa ở biên dọc (đỉnh và đáy) */
.hp-voucher-card::before,
.hp-voucher-card::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background-color: #ffffff; /* Khớp màu nền trắng của box container để tạo vết khoét */
  border: none;
  border-radius: 50%;
  left: 91px; /* Căn giữa đúng ranh giới 100px: 100px - 9px */
  z-index: 2; /* Đứng trên .hp-voucher-left (có z-index: 1) */
}

.hp-voucher-card::before {
  top: -10px; /* Nhô ra một nửa viền trên (18px / 2) và dịch lên 1px để không lệch viền xanh */
  clip-path: inset(50% 0 0 0);
}

.hp-voucher-card::after {
  bottom: -10px; /* Nhô ra một nửa viền dưới (18px / 2) và dịch xuống 1px để không lệch viền xanh */
  clip-path: inset(0 0 50% 0);
}

/* Mép trái voucher: Cyan-Blue Gradient với viền đứt phân tách */
.hp-voucher-left {
  position: relative;
  z-index: 1; /* Nằm dưới khía răng cưa để tránh che khuất */
  width: 100px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 8px;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  transition: all 300ms ease;
}

/* Hiệu ứng 3D đổ bóng chữ số tiền màu vàng chanh nhạt */
.hp-voucher-value {
  color: #f3f3ad !important;
  text-shadow: 0px 2px 0px rgba(0, 95, 163, 0.55), 0px 3px 6px rgba(0, 0, 0, 0.15) !important;
  font-family: inherit;
  font-weight: 900;
}

/* Trạng thái đã nhận: Làm dịu màu và mờ nhẹ mép trái */
.claimed-active .hp-voucher-left {
  filter: grayscale(20%) brightness(95%);
  opacity: 0.85;
}

/* === CHI TIẾT NỘI DUNG VÀ NÚT BẤM VOUCHER (PLAIN CSS) === */
.hp-voucher-right {
  flex-grow: 1 !important;
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  text-align: left !important;
}

.hp-voucher-title {
  color: #1e293b !important; /* slate-800 */
  font-size: 13px !important;
  font-weight: 900 !important; /* font-black */
  line-height: 1.375 !important;
  letter-spacing: -0.025em !important;
  margin: 0 !important;
}

.hp-voucher-desc {
  color: #64748b !important; /* slate-500 */
  font-size: 11px !important;
  font-weight: 600 !important;
  margin-top: 4px !important;
  line-height: 1.25 !important;
  margin-bottom: 0 !important;
}

.hp-voucher-expiry {
  display: inline-flex !important;
  align-items: center !important;
  color: #94a3b8 !important; /* slate-400 */
  font-size: 10px !important;
  font-weight: 600 !important;
  gap: 4px !important;
}

.hp-voucher-expiry svg {
  width: 14px !important;
  height: 14px !important;
  stroke: currentColor !important;
  stroke-width: 2.5 !important;
  fill: none !important;
  display: block !important;
}

.hp-voucher-limit {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #009EE3 !important; /* primary-blue */
  line-height: 1 !important;
  margin-top: 2px !important;
}

.hp-voucher-btn {
  background-color: #009EE3 !important; /* primary-blue */
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 6px 16px !important;
  border-radius: 99px !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  outline: none !important;
  box-shadow: 0 4px 6px -1px rgba(0, 158, 227, 0.15), 0 2px 4px -1px rgba(0, 158, 227, 0.1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  user-select: none !important;
  height: 28px !important;
}

.hp-voucher-btn:hover {
  background-color: #0A6CB7 !important; /* ocean-blue */
  box-shadow: 0 8px 12px -3px rgba(10, 108, 183, 0.25), 0 4px 6px -2px rgba(10, 108, 183, 0.15) !important;
  transform: translateY(-1px) !important;
}

.hp-voucher-btn:active {
  transform: translateY(0) scale(0.94) !important;
}

/* === HIỆU ỨNG XOAY LẬT THẺ 3D (3D CARD FLIP) === */
.hp-voucher-card-wrapper {
  perspective: 1000px;
  position: relative;
  width: 100%;
}

.hp-voucher-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

.hp-voucher-card-inner.is-flipped {
  transform: rotateY(180deg);
}

.hp-voucher-card-front,
.hp-voucher-card-back {
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  border-radius: 8px;
}

.hp-voucher-card-front {
  background-color: #ffffff;
}

.hp-voucher-card-back {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: rotateY(180deg);
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
  border: 1px solid #A7F3D0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  text-align: center;
  box-shadow: 0 4px 14px -2px rgba(4, 120, 87, 0.08);
}

/* === VOUCHER SLIDER NAVIGATION BUTTONS === */
#hp-voucher-slider-prev,
#hp-voucher-slider-next {
  width: 40px !important;
  height: 40px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  line-height: 1 !important;
  border-radius: 50% !important;
  border: 1px solid #cbd5e1 !important; /* border-slate-200 */
  background-color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #64748b !important; /* text-slate-500 */
  cursor: pointer !important;
  outline: none !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 20 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
  transition: all 200ms ease !important;
  padding: 0 !important;
  margin: 0 !important;
}

#hp-voucher-slider-prev {
  left: 12px !important;
}

#hp-voucher-slider-next {
  right: 12px !important;
}

#hp-voucher-slider-prev:hover,
#hp-voucher-slider-next:hover {
  background-color: #f8fafc !important; /* bg-slate-50 */
  color: #009EE3 !important; /* primary-blue */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

#hp-voucher-slider-prev:active,
#hp-voucher-slider-next:active {
  transform: translateY(-50%) scale(0.92) !important;
}

#hp-voucher-slider-prev svg,
#hp-voucher-slider-next svg {
  width: 20px !important;
  height: 20px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2.5 !important;
  display: block !important;
}

/* Adjust position on larger desktop screens to float outside the box slightly */
@media (min-width: 1024px) {
  #hp-voucher-slider-prev {
    left: -20px !important;
    top: 55% !important;
  }
  #hp-voucher-slider-next {
    right: -20px !important;
    top: 55% !important;
  }
}

/* Adjust position and size on mobile and tablet to prevent overlap with cards */
@media (max-width: 1023px) {
  #hp-voucher-slider-prev,
  #hp-voucher-slider-next {
    width: 28px !important;
    height: 28px !important;
    aspect-ratio: 1 / 1 !important;
  }
  #hp-voucher-slider-prev {
    left: -8px !important;
  }
  #hp-voucher-slider-next {
    right: -8px !important;
  }
  #hp-voucher-slider-prev svg,
  #hp-voucher-slider-next svg {
    width: 14px !important;
    height: 14px !important;
  }
}

/* ==========================================================================
   === FLATSOME NATIVE COMPONENT OVERRIDES (PREMIUM STYLING) ===
   ========================================================================== */

/* 1. Hero Slider & Banners */
.hp-hero-slider {
  box-shadow: 0 10px 30px -10px rgba(0, 95, 163, 0.08) !important;
}

.hp-hero-slider .flickity-page-dots {
  bottom: 1.5rem !important;
}

.hp-hero-slider .flickity-page-dots .dot {
  background: #009EE3 !important;
  opacity: 0.4 !important;
  width: 8px !important;
  height: 8px !important;
  margin: 0 5px !important;
  transition: all 0.3s ease !important;
}

.hp-hero-slider .flickity-page-dots .dot.is-selected {
  opacity: 1 !important;
  width: 24px !important;
  border-radius: 4px !important;
}

.hp-hero-slider .flickity-prev-next-button {
  background-color: rgba(255, 255, 255, 0.9) !important;
  color: #009EE3 !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.3s ease !important;
}

.hp-hero-slider .flickity-prev-next-button:hover {
  background-color: #009EE3 !important;
  color: #ffffff !important;
}

/* 2. Product Categories Section */
.box-category {
  border-radius: var(--hp-cat-border-radius, 1.5rem) !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px -4px rgba(0, 95, 163, 0.06) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.box-category:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 30px -8px rgba(0, 95, 163, 0.12) !important;
}

.box-category .box-image img {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.box-category:hover .box-image img {
  transform: scale(1.06) !important;
}

/* Position Category title top-left */
.box-category.box-overlay .box-text {
  position: absolute !important;
  top: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  right: 0 !important;
  padding: 1.5rem !important;
  text-align: left !important;
  background-color: transparent !important;
  z-index: 5 !important;
}

.box-category.box-overlay .box-text-inner {
  text-align: left !important;
}

.box-category.box-overlay .header-title {
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0.025em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2) !important;
  line-height: 1.25 !important;
}

@media (max-width: 549px) {
  .box-category.box-overlay .header-title {
    font-size: 1.1rem !important;
  }
  .box-category.box-overlay .box-text {
    padding: 1rem !important;
  }
}
@media (min-width: 550px) and (max-width: 849px) {
  .box-category.box-overlay .header-title {
    font-size: 1.3rem !important;
  }
}
@media (min-width: 850px) {
  .box-category.box-overlay .header-title {
    font-size: 1.6rem !important;
  }
}

.box-category.box-overlay .overlay {
  background: linear-gradient(to bottom, var(--hp-cat-gradient-start, rgba(0, 158, 227, 0.75)) 0%, transparent 55%) !important;
  opacity: 1 !important;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.box-category.box-overlay:hover .overlay {
  opacity: 0.3 !important; /* Làm sáng rực rỡ và rõ nét ảnh sản phẩm ở sau khi di chuột vào */
}

.box-category.box-overlay .count {
  display: none !important; /* Hide product counts for cleaner look */
}

/* 3. Product Box (Best Sellers) */
/* 3. Product Box (Best Sellers) */
.product-small.box {
  background-color: transparent !important;
  border: none !important;
  border-radius: var(--hp-prod-border-radius, 1rem) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  padding-bottom: 0.5rem !important;
  flex-grow: 1 !important;
  height: 100% !important;
}

.product-small.box:hover {
  transform: translateY(-2px) !important;
}

.product-small.box .box-image {
  aspect-ratio: 1/1 !important;
  background-color: transparent !important;
  border-radius: var(--hp-prod-border-radius, 1rem) !important;
  overflow: hidden !important;
  position: relative !important;
}

.product-small.box .box-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: var(--hp-prod-border-radius, 1rem) !important;
  transition: transform 0.5s ease !important;
}

.product-small.box:hover .box-image img {
  transform: scale(1.04) !important;
}

/* Badge styling matching design */
.col-inner > .badge-container {
  top: 1.5rem !important;
  right: 0px !important;
  left: auto !important;
  margin: 0 !important;
  z-index: 10 !important;
}

.col-inner > .badge-container .badge {
  background-color: var(--hp-prod-badge-color, #f97316) !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 4px 10px 4px 14px !important;
  border-radius: 9999px 0 0 9999px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
  border: none !important;
  line-height: 1 !important;
  height: auto !important;
  width: auto !important;
}

.col-inner > .badge-container .badge-inner {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  display: inline-block !important;
}

.col-inner > .badge-container .onsale {
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* Text area styling */
.product-small.box .box-text {
  padding: 1rem 0.25rem 0 0.25rem !important;
  background-color: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  text-align: left !important;
  justify-content: space-between !important;
}

.product-small.box .box-text-inner {
  text-align: left !important;
}

/* Đồng bộ chiều cao cho các cột chứa thẻ sản phẩm (cả dạng lưới và slider) */
.product-small.col {
  display: flex !important;
  flex-direction: column !important;
}

.product-small.col .col-inner {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  height: 100% !important;
}

/* Đảm bảo các slide trong Flickity slider chiếm hết chiều cao viewport mà không gây sập */
.slider.flickity-enabled .flickity-slider > .product-small.col {
  min-height: 100% !important;
}

/* Đảm bảo các slide sản phẩm nằm ngang (inline-block) trước khi Flickity được kích hoạt */
.slider:not(.flickity-enabled) > .product-small.col {
  display: inline-block !important;
  vertical-align: top;
  float: none !important;
}

/* Product title */
.product-small.box .name {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: #0f172a !important; /* slate-900 */
  margin-bottom: 0.5rem !important;
  font-family: 'Inter', sans-serif !important;
  height: 4.1em !important; /* Khóa chiều cao cố định tương đương 3 dòng tiêu đề */
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
}

@media (min-width: 1200px) {
  .product-small.box .name {
    font-size: 0.9rem !important;
  }
}

.product-small.box .name a {
  color: #0f172a !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.product-small.box:hover .name a {
  color: #009EE3 !important; /* primary-blue */
}

/* Star rating override */
.product-small.box .star-rating {
  font-size: 0.75rem !important;
  color: #fbbf24 !important; /* amber-400 */
  margin: 0 0 0.5rem 0 !important;
  float: none !important;
  display: inline-block !important;
}

.product-small.box .star-rating::before {
  color: rgba(251, 191, 36, 0.3) !important;
}

/* Price block */
.product-small.box .price-wrapper {
  margin-top: auto !important;
  padding-top: 0.75rem !important;
  border-top: 1px solid rgba(241, 245, 249, 0.7) !important; /* slate-100/70 */
  display: flex !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 0.4rem !important;
}

.product-small.box .price {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: #009EE3 !important;
  display: block !important;
  height: 2.4em !important; /* Khóa chiều cao cố định để đồng bộ hàng giá */
}

@media (min-width: 1200px) {
  .product-small.box .price {
    font-size: 1.2rem !important;
  }
}

/* Color active price text blue (including inner spans and bdi) */
.product-small.box .price,
.product-small.box .price ins,
.product-small.box .price ins .amount,
.product-small.box .price ins bdi,
.product-small.box .price > .amount,
.product-small.box .price > bdi,
.product-small.box .price > span {
  color: #009EE3 !important;
}

/* Color original price text grey */
.product-small.box .price del,
.product-small.box .price del .amount,
.product-small.box .price del bdi {
  color: #64748b !important; /* slate-500 */
  font-size: 0.7rem !important;
  font-weight: 400 !important;
  text-decoration: line-through !important;
  opacity: 0.8 !important;
}

.product-small.box .price del {
  display: block !important;
}

.product-small.box .price del span {
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  text-decoration: inherit !important;
  display: inline !important; /* Ngăn ký hiệu tiền tệ 'đ' bị rớt dòng */
}

.product-small.box .price ins {
  background-color: transparent !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: block !important;
}

/* Force sale price (ins) on top and original price (del) at bottom using flex order */
.product-small.box .price:has(del) {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
}

.product-small.box .price:has(del) ins {
  order: 1 !important;
}

.product-small.box .price:has(del) del {
  order: 2 !important;
}

/* Ẩn nút mũi tên slider sản phẩm và mở rộng chiều rộng ra sát viền */
.slider.flickity-enabled {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.slider.flickity-enabled .flickity-prev-next-button {
  display: none !important;
}

/* Ẩn nút Quick View của card sản phẩm */
.product-small.box .quick-view {
  display: none !important;
}

/* 4. About Us Section styling */
.hp-about-section {
  border-radius: var(--hp-about-border-radius, 2rem) !important;
  border: 1px solid rgba(224, 242, 254, 0.6) !important; /* sky-100/60 */
  background: linear-gradient(135deg, var(--hp-about-bg-start, rgba(240, 249, 255, 0.7)) 0%, var(--hp-about-bg-end, #ffffff) 100%) !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: 0 10px 30px -10px rgba(0, 158, 227, 0.05) !important;
  margin-top: 3rem !important;
  margin-bottom: 4rem !important;
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.hp-about-section::before {
  content: '' !important;
  position: absolute !important;
  top: -4rem !important;
  left: -4rem !important;
  width: 16rem !important;
  height: 16rem !important;
  background-color: rgba(186, 230, 253, 0.2) !important; /* sky-200/20 */
  border-radius: 9999px !important;
  filter: blur(40px) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.hp-about-section::after {
  content: '' !important;
  position: absolute !important;
  bottom: -5rem !important;
  right: -5rem !important;
  width: 20rem !important;
  height: 20rem !important;
  background-color: rgba(219, 234, 254, 0.3) !important; /* blue-100/30 */
  border-radius: 9999px !important;
  filter: blur(40px) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.hp-about-section .row {
  position: relative !important;
  z-index: 2 !important;
}

.about-image-3d img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.about-image-3d:hover img {
  transform: scale(1.04) !important;
}

/* About Section heading/texts styles */
.about-section-header h2 {
  color: #0f172a !important; /* slate-900 */
}

/* Badges styling */
.about-badges-container {
  margin-bottom: 2rem !important;
}

/* Custom styling for the CTA button variants */
.hp-btn-solid,
.hp-btn-outline,
.hp-btn-ghost,
.hp-about-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  text-decoration: none !important;
  cursor: pointer !important;
  border-radius: var(--hp-about-btn-radius, 99px) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-shadow: none !important;
  box-sizing: border-box !important;
}

/* Sizing fallbacks when Tailwind CSS is not active */
.hp-btn-solid,
.hp-btn-outline,
.hp-about-btn {
  padding: 0.75rem 2rem !important;
  font-size: 0.875rem !important;
}

/* Large size mapping */
.hp-btn-solid.px-8.py-3\.5,
.hp-btn-outline.px-8.py-3\.5 {
  padding: 0.875rem 2.25rem !important;
  font-size: 0.9375rem !important;
}

/* Small size mapping */
.hp-btn-solid.px-5.py-2\.5,
.hp-btn-outline.px-5.py-2\.5 {
  padding: 0.5rem 1.25rem !important;
  font-size: 0.75rem !important;
}

/* Layout overrides helper for non-tailwind context */
.hp-btn-solid.flex-1,
.hp-btn-outline.flex-1 {
  flex: 1 1 0% !important;
}
.hp-btn-solid.w-full,
.hp-btn-outline.w-full {
  width: 100% !important;
}

/* Solid Button Appearance */
.hp-btn-solid,
.hp-about-btn {
  background-color: var(--hp-about-btn-bg, #009EE3) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(0, 158, 227, 0.15) !important;
}

.hp-btn-solid:hover,
.hp-about-btn:hover {
  background-color: var(--hp-about-btn-hover, #0082ba) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 16px rgba(0, 158, 227, 0.25) !important;
}

/* Outline Button Appearance */
.hp-btn-outline {
  background-color: transparent !important;
  border: 1px solid var(--hp-about-btn-bg, #009EE3) !important;
  color: var(--hp-about-btn-bg, #009EE3) !important;
  box-shadow: none !important;
}

.hp-btn-outline:hover {
  background-color: var(--hp-about-btn-bg, #009EE3) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 158, 227, 0.15) !important;
}

/* Ghost Button Appearance */
.hp-btn-ghost {
  background-color: transparent !important;
  color: var(--hp-about-btn-bg, #009EE3) !important;
  box-shadow: none !important;
}

.hp-btn-ghost:hover {
  color: var(--hp-about-btn-hover, #0082ba) !important;
  background-color: rgba(0, 158, 227, 0.05) !important;
  transform: translateY(-1px) !important;
}

/* SVG icon styling within buttons to prevent giant sizing */
.hp-btn-solid svg,
.hp-btn-outline svg,
.hp-btn-ghost svg {
  width: 1rem !important;
  height: 1rem !important;
  min-width: 1rem !important;
  min-height: 1rem !important;
  flex-shrink: 0 !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.5px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  transition: transform 0.3s ease !important;
}

/* Translate effect only for arrow/chevron icons */
.hp-btn-solid:hover svg.transition-transform,
.hp-btn-outline:hover svg.transition-transform {
  transform: translateX(2px) !important;
}

/* Nới rộng chiều ngang của các hàng sản phẩm trên Trang chủ và trang Cửa hàng */
.home .row-slider,
.home .products.row,
.archive.post-type-archive-product .products.row {
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Custom Social Video Lightbox Stacking Context Fix */
#social-video-lightbox {
  z-index: 999999 !important;
}

/* ==========================================================================
   === SOCIAL MEDIA VIDEO SLIDER (PLAIN CSS) ===
   ========================================================================== */

#social-media-videos {
  width: 100% !important;
  padding: 4rem 0 !important;
  background-color: #ffffff !important;
  border-top: 1px solid rgba(241, 245, 249, 0.8) !important;
  overflow: hidden !important;
  user-select: none !important;
}

.social-container {
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
}

@media (min-width: 1400px) {
  .social-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ==========================================================================
   === HOMEPOWER SECTION HEADERS (PLAIN CSS) ===
   ========================================================================== */

.hp-section-header {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.25rem !important;
  margin-top: 1.5rem !important;
  margin-bottom: 2.5rem !important;
  user-select: none !important;
  pointer-events: none !important;
}

.hp-section-header-line {
  display: flex !important;
  align-items: center !important;
}

.hp-section-header-line-left .h-line {
  height: 1px !important;
  width: 48px !important;
  background: linear-gradient(to right, transparent, rgba(0, 158, 227, 0.3)) !important;
}

.hp-section-header-line-right .h-line {
  height: 1px !important;
  width: 48px !important;
  background: linear-gradient(to left, transparent, rgba(0, 158, 227, 0.3)) !important;
}

@media (min-width: 640px) {
  .hp-section-header-line-left .h-line,
  .hp-section-header-line-right .h-line {
    width: 80px !important;
  }
}

@media (min-width: 768px) {
  .hp-section-header-line-left .h-line,
  .hp-section-header-line-right .h-line {
    width: 112px !important;
  }
}

.hp-section-header-line .h-line-short {
  height: 1px !important;
  width: 16px !important;
  background-color: rgba(0, 158, 227, 0.3) !important;
}

@media (min-width: 640px) {
  .hp-section-header-line .h-line-short {
    width: 24px !important;
  }
}

@media (min-width: 768px) {
  .hp-section-header-line .h-line-short {
    width: 40px !important;
  }
}

.hp-section-header-star {
  width: 10px !important;
  height: 10px !important;
  color: rgba(0, 158, 227, 0.6) !important;
  margin-left: 6px !important;
  margin-right: 6px !important;
}

@media (min-width: 640px) {
  .hp-section-header-star {
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
}

.hp-section-header-title {
  color: #009EE3 !important; /* primary-blue */
  font-size: 1.125rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  margin: 0 !important;
  font-family: 'Inter', sans-serif !important;
}

@media (min-width: 640px) {
  .hp-section-header-title {
    font-size: 1.25rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

@media (min-width: 768px) {
  .hp-section-header-title {
    font-size: 1.5rem !important;
  }
}

@media (min-width: 1024px) {
  .hp-section-header-title {
    font-size: 1.875rem !important;
  }
}

/* Slider Wrapper */
.social-slider-wrapper {
  position: relative !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: hidden !important;
}

/* Slider Track */
#social-slider-track {
  display: flex !important;
  gap: 24px !important;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  cursor: grab !important;
  will-change: transform !important;
}

#social-slider-track:active {
  cursor: grabbing !important;
}

/* Video Card Item */
.social-video-card-item {
  width: 190px !important;
  height: 338px !important; /* aspect 9/16 for 190px width */
  border-radius: 1rem !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.social-video-card-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

@media (min-width: 640px) {
  .social-video-card-item {
    width: 230px !important;
    height: 409px !important; /* aspect 9/16 for 230px width */
  }
}

@media (min-width: 768px) {
  .social-video-card-item {
    width: 270px !important;
    height: 480px !important; /* aspect 9/16 for 270px width */
  }
}

.social-video-card-item video {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  user-select: none !important;
  pointer-events: none !important;
}

.social-video-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(15, 23, 42, 0.15) !important;
  z-index: 10 !important;
  transition: background-color 0.3s ease !important;
}

.social-video-card-item:hover .social-video-overlay {
  background-color: rgba(15, 23, 42, 0.25) !important;
}

/* Dots Container */
#social-slider-dots {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin-top: 2rem !important;
  user-select: none !important;
}

#social-slider-dots button {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  cursor: pointer !important;
  outline: none !important;
  height: 8px !important;
}

.social-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background-color: #cbd5e1 !important; /* slate-300 */
  transition: all 0.3s ease !important;
  display: inline-block !important;
}

.social-dot.active {
  width: 20px !important;
  border-radius: 4px !important;
  background-color: #009EE3 !important; /* primary-blue */
}

/* Lightbox Modal */
#social-video-lightbox {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: rgba(2, 6, 23, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: opacity 0.3s ease !important;
  opacity: 0;
  z-index: 999999 !important;
}

#social-video-lightbox.active-lightbox {
  display: flex !important;
  opacity: 1 !important;
}

/* Lightbox Close Overlay */
.lightbox-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  cursor: pointer !important;
  z-index: 1 !important;
}

/* Lightbox Box Container */
#social-lightbox-container {
  position: relative !important;
  width: 90% !important;
  max-height: 85vh !important;
  background-color: #000000 !important;
  border-radius: 1rem !important;
  overflow: hidden !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  margin: 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: scale(0.95) !important;
  transition: transform 0.3s ease, opacity 0.3s ease !important;
  opacity: 0;
  z-index: 10 !important;
}

#social-lightbox-container.active-container {
  transform: scale(1) !important;
  opacity: 1 !important;
}

/* Portrait vs Landscape */
#social-lightbox-container.lightbox-portrait {
  max-width: 420px !important;
  aspect-ratio: 9/16 !important;
}

#social-lightbox-container.lightbox-landscape {
  max-width: 960px !important;
  aspect-ratio: 16/9 !important;
}

/* Close Button */
.lightbox-close-btn {
  position: absolute !important;
  top: 1rem !important;
  right: 1rem !important;
  z-index: 50 !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  color: #ffffff !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color 0.2s ease !important;
  padding: 0 !important;
}

.lightbox-close-btn:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
}

.lightbox-close-btn svg {
  width: 20px !important;
  height: 20px !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  fill: none !important;
}

/* Lightbox Content */
#social-lightbox-content {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#social-lightbox-content video,
#social-lightbox-content iframe {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
}

/* ==========================================================================
   === HOMEPOWER PREMIUM FOOTER & MOBILE STICKY BAR (PLAIN CSS) ===
   ========================================================================== */

.hp-footer {
  background-color: #ffffff !important;
  color: #64748b !important; /* slate-500 */
  border-top: 1px solid #f1f5f9 !important; /* slate-100 */
  user-select: none !important;
  padding: 60px 0 !important;
}

/* Align footer content width to match homepage content container */
.hp-footer .row {
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (min-width: 1025px) {
  .hp-footer-col-border {
    border-right: 1px solid rgba(241, 245, 249, 0.7) !important;
    padding-right: 30px !important;
  }
  .hp-footer-col-px {
    border-right: 1px solid rgba(241, 245, 249, 0.7) !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
  .hp-footer-col-pl {
    padding-left: 30px !important;
  }
}

/* Brand Logo Styling */
.hp-footer-brand {
  display: inline-flex !important;
  align-items: center !important;
  margin-bottom: 20px !important;
  text-decoration: none !important;
}

.hp-footer-brand span {
  color: #009EE3 !important; /* primary-blue */
  font-weight: 900 !important;
  font-size: 24px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

.hp-footer-desc {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #64748b !important;
  margin-bottom: 20px !important;
}

/* Social Buttons */
.hp-footer-socials {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 10px !important;
}

.hp-social-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

.hp-social-btn svg {
  width: 18px !important;
  height: 18px !important;
  fill: currentColor !important;
}

.hp-social-fb { background-color: #1877F2 !important; }
.hp-social-tiktok { background-color: #000000 !important; }
.hp-social-yt { background-color: #FF0000 !important; }
.hp-social-ig { background: linear-gradient(45deg, #F9C536, #E1306C, #812A2A) !important; }

.hp-social-btn:hover {
  transform: translateY(-2px) scale(1.1) !important;
}

/* Headings & Lists */
.hp-footer-heading {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #009EE3 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  margin-bottom: 20px !important;
  margin-top: 0 !important;
}

/* Force left alignment for all containers, headers, text and links within the footer */
.hp-footer .col-inner,
.hp-footer .text,
.hp-footer-heading,
.hp-footer-links {
  text-align: left !important;
  align-items: flex-start !important;
}

.hp-footer-links {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
  text-align: left !important;
}

.hp-footer-links li {
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
  list-style-type: none !important;
  text-align: left !important;
  width: 100% !important;
}

.hp-footer-links a {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: all 300ms ease !important;
  text-align: left !important;
}

.hp-footer-links a:hover {
  color: #0A6CB7 !important;
  transform: translateX(4px) !important;
}

/* Contact List */
.hp-footer-contact {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.hp-footer-contact li {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  list-style-type: none !important;
}

.hp-footer-contact li.hp-contact-align-start {
  align-items: flex-start !important;
}

.hp-footer-contact svg {
  width: 20px !important;
  height: 20px !important;
  color: #009EE3 !important;
  flex-shrink: 0 !important;
}

.hp-footer-contact li.hp-contact-align-start svg {
  margin-top: 2px !important;
}

.hp-contact-hotline {
  color: #334155 !important; /* slate-700 */
  font-weight: 800 !important;
  font-size: 15px !important;
}

.hp-footer-contact a {
  color: #64748b !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.hp-footer-contact a:hover {
  color: #0A6CB7 !important;
}

/* Copyright Row */
.hp-footer-copyright {
  margin-top: 40px !important;
  padding-top: 30px !important;
  border-top: 1px solid #f1f5f9 !important;
  text-align: center !important;
  width: 100% !important;
}

.hp-footer-copyright p {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
  margin: 0 !important;
}

/* Mobile Bottom Sticky Bar */
.hp-mobile-sticky-bar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  background-color: #009EE3 !important;
  box-shadow: 0 -4px 15px rgba(0, 158, 227, 0.2) !important;
  border-radius: 20px 20px 0 0 !important;
  overflow: hidden !important;
}

.hp-sticky-bar-grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  height: 56px !important;
  align-items: center !important;
}

.hp-sticky-item-deal {
  grid-column: span 4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 100% !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease !important;
}

.hp-sticky-item-deal:hover {
  background-color: #0A6CB7 !important;
}

.hp-sticky-item-deal svg {
  width: 20px !important;
  height: 20px !important;
  animation: hp-bounce 1s infinite alternate !important;
}

.hp-sticky-item-deal span {
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

.hp-sticky-item-action {
  grid-column: span 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  color: #ffffff !important;
  text-decoration: none !important;
  border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
  transition: background-color 0.2s ease !important;
}

.hp-sticky-item-action:hover {
  background-color: #0A6CB7 !important;
}

.hp-sticky-item-action svg {
  width: 24px !important;
  height: 24px !important;
}

.hp-sticky-zalo svg {
  width: 40px !important;
  height: 40px !important;
  fill: currentColor !important;
}

@keyframes hp-bounce {
  0% { transform: translateY(0); }
  100% { transform: translateY(-4px); }
}

@media (min-width: 768px) {
  /* Make container transparent and position in bottom-right corner */
  .hp-mobile-sticky-bar {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  /* Align the buttons vertically */
  .hp-sticky-bar-grid {
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 12px !important;
    height: auto !important;
    width: auto !important;
  }

  /* Hide the Deal Sốc banner on desktop */
  .hp-sticky-item-deal {
    display: none !important;
  }

  /* Style the buttons as floating circles */
  .hp-sticky-item-action {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    background-color: var(--hp-primary) !important;
  }

  .hp-sticky-zalo {
    background-color: #0068ff !important;
  }

  .hp-sticky-item-action:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
    background-color: var(--hp-primary-hover) !important;
  }

  .hp-sticky-zalo:hover {
    background-color: #0056d6 !important;
  }

  .hp-sticky-item-action svg {
    width: 24px !important;
    height: 24px !important;
  }

  .hp-sticky-zalo svg {
    width: 28px !important;
    height: 28px !important;
  }
}

@media (max-width: 767px) {
  body {
    padding-bottom: 56px !important;
  }
}

/* Set default body, wrapper, and main content background color to match original theme's bg-slate-50 (#f8fafc) */
body,
#wrapper,
#main,
#content,
.content-area {
  background-color: #f8fafc !important;
}

/* Category Slider Custom Cards: 3 Columns layout and 4:3 aspect-ratio */
.hp-category-card {
  width: calc((100% - 24px) / 2) !important; /* Mobile fallback (2 columns) */
  aspect-ratio: 4/3 !important;             /* 4:3 Aspect Ratio */
}

@media (min-width: 640px) {
  .hp-category-card {
    width: calc((100% - 48px) / 3) !important; /* Tablet & Desktop (Fixed 3 columns) */
  }
}

/* ==========================================================================
   === GLOBAL WOOCOMMERCE & FLATSOME BUTTONS UNIFICATION ===
   ========================================================================== */

/* 1. Nút chính WooCommerce (Solid) */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce-checkout #payment #place_order,
.woocommerce-form-login .woocommerce-form-login__submit,
.woocommerce-form-register .woocommerce-form-register__submit,
.woocommerce-form-lost-password button[type="submit"] {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-radius: 9999px !important;
  background-color: var(--hp-about-btn-bg, #009EE3) !important;
  color: #ffffff !important;
  padding: 0.75rem 2rem !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(0, 158, 227, 0.15) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  text-shadow: none !important;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce-checkout #payment #place_order:hover,
.woocommerce-form-login .woocommerce-form-login__submit:hover,
.woocommerce-form-register .woocommerce-form-register__submit:hover,
.woocommerce-form-lost-password button[type="submit"]:hover {
  background-color: var(--hp-about-btn-hover, #0082ba) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 16px rgba(0, 158, 227, 0.25) !important;
  color: #ffffff !important;
}

/* 2. Nút phụ WooCommerce (Outline) */
.woocommerce a.button:not(.alt),
.woocommerce button.button:not(.alt),
.woocommerce input.button:not(.alt),
.woocommerce #respond input#submit:not(.alt) {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-radius: 9999px !important;
  background-color: transparent !important;
  color: var(--hp-about-btn-bg, #009EE3) !important;
  border: 1px solid var(--hp-about-btn-bg, #009EE3) !important;
  padding: 0.75rem 2rem !important;
  box-shadow: none !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  text-shadow: none !important;
}

.woocommerce a.button:not(.alt):hover,
.woocommerce button.button:not(.alt):hover,
.woocommerce input.button:not(.alt):hover,
.woocommerce #respond input#submit:not(.alt):hover {
  background-color: var(--hp-about-btn-bg, #009EE3) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 158, 227, 0.15) !important;
}

/* 3. Nút Mini-Cart (Giỏ hàng bay) */
.widget_shopping_cart_content .buttons a {
  border-radius: 9999px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  text-shadow: none !important;
}

/* Hide Flatsome back-to-top button */
#top-link,
.back-to-top {
  display: none !important;
}

/* ==========================================================================
   === HOMEPOWER PREMIUM HOMEPAGE COMPONENTS (PLAIN CSS - STORY-25) ===
   ========================================================================== */

/* --- HP Button Component --- */
.hp-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  user-select: none !important;
  cursor: pointer !important;
  transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-decoration: none !important;
  font-family: 'Inter', sans-serif !important;
  border: none !important;
  text-shadow: none !important;
  box-sizing: border-box !important;
}

.hp-btn-sm {
  padding: 8px 20px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  border-radius: 9999px !important;
  text-transform: uppercase !important;
}

.hp-btn-md {
  padding: 12px 32px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  border-radius: 9999px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

.hp-btn-lg {
  padding: 14px 32px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  border-radius: 9999px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

.hp-btn-solid {
  background-color: var(--hp-about-btn-bg, #009EE3) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 158, 227, 0.15) !important;
}

.hp-btn-solid:hover {
  background-color: var(--hp-about-btn-hover, #0082ba) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 16px rgba(0, 158, 227, 0.25) !important;
}

.hp-btn-outline {
  background-color: transparent !important;
  color: var(--hp-about-btn-bg, #009EE3) !important;
  border: 1px solid var(--hp-about-btn-bg, #009EE3) !important;
}

.hp-btn-outline:hover {
  background-color: var(--hp-about-btn-bg, #009EE3) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 158, 227, 0.15) !important;
}

.hp-btn-ghost {
  background-color: transparent !important;
  color: var(--hp-about-btn-bg, #009EE3) !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.hp-btn-ghost:hover {
  color: #0082ba !important;
}

.hp-btn-icon-right {
  transition: transform 300ms ease !important;
  width: 16px !important;
  height: 16px !important;
  stroke: currentColor !important;
  fill: none !important;
}

.hp-btn:hover .hp-btn-icon-right {
  transform: translateX(3px) !important;
}


/* --- HP Hero Slider Section --- */
.hp-hero-section {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  background-color: #020617 !important;
}

.hp-hero-track {
  display: flex !important;
  width: 100% !important;
  transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.hp-hero-slide {
  width: 100% !important;
  flex-shrink: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  aspect-ratio: 16/9 !important;
  height: auto !important;
}

@media (min-width: 640px) {
  .hp-hero-slide {
    aspect-ratio: 2/1 !important;
  }
}

.hp-hero-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  user-select: none !important;
  pointer-events: none !important;
}

.hp-hero-dots {
  position: absolute !important;
  bottom: 24px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 20 !important;
  display: flex !important;
  gap: 12px !important;
}

@media (min-width: 640px) {
  .hp-hero-dots {
    display: none !important;
  }
}


/* --- HP Product Categories Section --- */
.hp-categories-section {
  max-w-[1400px] !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 16px 20px 64px 20px !important;
  user-select: none !important;
}

.hp-categories-relative {
  position: relative !important;
}

.hp-categories-overflow {
  overflow: hidden !important;
  width: 100% !important;
  padding: 16px 4px !important;
}

.hp-categories-track {
  display: flex !important;
  gap: 24px !important;
  transition: transform 500ms cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.hp-category-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
  pointer-events: none !important;
}

.hp-category-card:hover .hp-category-image {
  transform: scale(1.05) !important;
}

.hp-category-overlay {
  position: absolute !important;
  inset: 0 !important;
  height: 50% !important;
  background: linear-gradient(180deg, rgba(0, 158, 227, 0.65) 0%, rgba(0, 158, 227, 0.2) 60%, transparent 100%) !important;
  pointer-events: none !important;
}

.hp-category-title-wrapper {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  right: 12px !important;
  pointer-events: none !important;
}

@media (min-width: 480px) {
  .hp-category-title-wrapper {
    top: 16px !important;
    left: 16px !important;
    right: 16px !important;
  }
}

@media (min-width: 768px) {
  .hp-category-title-wrapper {
    top: 24px !important;
    left: 24px !important;
    right: 24px !important;
  }
}

.hp-category-title {
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 16px !important;
  letter-spacing: 0.05em !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  font-family: 'Inter', sans-serif !important;
}

@media (min-width: 480px) {
  .hp-category-title {
    font-size: 18px !important;
  }
}

@media (min-width: 768px) {
  .hp-category-title {
    font-size: 20px !important;
  }
}

@media (min-width: 1024px) {
  .hp-category-title {
    font-size: 24px !important;
  }
}

@media (min-width: 1200px) {
  .hp-category-title {
    font-size: 28px !important;
  }
}

.hp-categories-dots {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 24px !important;
}

@media (min-width: 640px) {
  .hp-categories-dots {
    display: none !important;
  }
}


/* --- HP Featured Products Section --- */
.hp-featured-section {
  max-w-[1400px] !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 64px 20px !important;
}

.hp-featured-relative {
  position: relative !important;
}

.hp-featured-overflow {
  overflow: hidden !important;
  width: 100% !important;
  padding: 16px 4px !important;
}

.hp-featured-track {
  display: flex !important;
  gap: 24px !important;
  transition: transform 500ms cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.hp-featured-item {
  width: calc((100% - 24px) / 2) !important;
  flex-shrink: 0 !important;
}

@media (min-width: 768px) {
  .hp-featured-item {
    width: calc((100% - 48px) / 3) !important;
  }
}

@media (min-width: 1024px) {
  .hp-featured-item {
    width: calc((100% - 96px) / 5) !important;
  }
}

.hp-featured-dots {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 16px !important;
  margin-bottom: 8px !important;
}

@media (min-width: 640px) {
  .hp-featured-dots {
    display: none !important;
  }
}

.hp-featured-cta-wrapper {
  text-align: center !important;
  margin-top: 48px !important;
}

.hp-featured-cta {
  border: 1px solid #009EE3 !important;
  font-size: 14px !important;
  color: #009EE3 !important;
}


/* --- HP Product Card --- */
.hp-product-card {
  background-color: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: all 300ms ease !important;
  position: relative !important;
}

.hp-product-card:hover {
  transform: translateY(-2px) !important;
}

.hp-product-card-media {
  aspect-ratio: 1/1 !important;
  width: 100% !important;
  background-color: transparent !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

.hp-product-card-badge {
  position: absolute !important;
  top: 24px !important;
  right: 0 !important;
  z-index: 10 !important;
  padding: 4px 10px 4px 14px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  border-radius: 99px 0 0 99px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
  user-select: none !important;
}

.hp-badge-emerald {
  background-color: #10b981 !important;
}

.hp-badge-orange {
  background-color: #f97316 !important;
}

.hp-badge-darkorange {
  background-color: #ea580c !important;
}

.hp-product-card-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  transition: transform 300ms ease !important;
  user-select: none !important;
}

.hp-product-card:hover .hp-product-card-image {
  transform: scale(1.05) !important;
}

.hp-product-card-content {
  padding-top: 16px !important;
  padding-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  justify-content: space-between !important;
}

.hp-product-card-rating-wrapper {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 8px !important;
}

.hp-product-card-rating {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
}

.hp-product-card-star {
  width: 14px !important;
  height: 14px !important;
  color: #fbbf24 !important;
  fill: currentColor !important;
  flex-shrink: 0 !important;
}

.hp-product-card-rating-value {
  font-size: 12px !important;
  color: #475569 !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.hp-product-card-rating-count {
  font-size: 12px !important;
  color: #64748b !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

.hp-product-card-title {
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  margin-bottom: 12px !important;
  font-family: 'Inter', sans-serif !important;
}

@media (min-width: 1200px) {
  .hp-product-card-title {
    font-size: 16px !important;
  }
}

.hp-product-card-title a {
  color: #0f172a !important;
  text-decoration: none !important;
  transition: color 200ms ease !important;
}

.hp-product-card:hover .hp-product-card-title a {
  color: #009EE3 !important;
}

.hp-product-card-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: auto !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(241, 245, 249, 0.5) !important;
}

.hp-product-card-price-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.hp-product-card-price {
  color: #009EE3 !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
}

@media (min-width: 1200px) {
  .hp-product-card-price {
    font-size: 18px !important;
  }
}

.hp-product-card-price-regular {
  color: #475569 !important;
  font-size: 12px !important;
  text-decoration: line-through !important;
  line-height: 1 !important;
}


/* --- HP About Us Section --- */
.hp-about-section {
  width: 100% !important;
  padding: 40px 0 !important;
  background-color: #ffffff !important;
}

@media (min-width: 768px) {
  .hp-about-section {
    padding: 64px 0 !important;
  }
}

.hp-about-container {
  max-w-[1400px] !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

@media (min-width: 640px) {
  .hp-about-container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

@media (min-width: 1024px) {
  .hp-about-container {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

.hp-about-card {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 32px !important;
  background: linear-gradient(135deg, rgba(224, 242, 254, 0.7) 0%, #ffffff 50%, rgba(224, 242, 254, 0.4) 100%) !important;
  border: 1px solid rgba(224, 242, 254, 0.5) !important;
  padding: 32px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 40px !important;
  align-items: center !important;
}

@media (min-width: 640px) {
  .hp-about-card {
    padding: 40px !important;
  }
}

@media (min-width: 768px) {
  .hp-about-card {
    padding: 48px !important;
  }
}

@media (min-width: 1024px) {
  .hp-about-card {
    padding: 64px !important;
    flex-direction: row !important;
    gap: 64px !important;
  }
}

.hp-about-blur-1 {
  position: absolute !important;
  top: -64px !important;
  left: -64px !important;
  width: 256px !important;
  height: 256px !important;
  background-color: rgba(186, 230, 253, 0.2) !important;
  border-radius: 50% !important;
  filter: blur(48px) !important;
  pointer-events: none !important;
}

.hp-about-blur-2 {
  position: absolute !important;
  bottom: -80px !important;
  right: -80px !important;
  width: 320px !important;
  height: 320px !important;
  background-color: rgba(219, 234, 254, 0.3) !important;
  border-radius: 50% !important;
  filter: blur(48px) !important;
  pointer-events: none !important;
}

.hp-about-image-column {
  position: relative !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  height: 260px !important;
  flex-shrink: 0 !important;
}

@media (min-width: 640px) {
  .hp-about-image-column {
    height: 350px !important;
  }
}

@media (min-width: 1024px) {
  .hp-about-image-column {
    width: 50% !important;
    height: 400px !important;
  }
}

.hp-about-image-inner {
  position: relative !important;
  width: 220px !important;
  height: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

@media (min-width: 640px) {
  .hp-about-image-inner {
    width: 280px !important;
  }
}

@media (min-width: 1024px) {
  .hp-about-image-inner {
    width: 320px !important;
  }
}

.hp-about-image-wrapper {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

.hp-about-image-wrapper:hover {
  transform: scale(1.04) !important;
}

.hp-about-image {
  position: absolute !important;
  z-index: 10 !important;
  width: 170% !important;
  height: auto !important;
  max-width: none !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  top: 48% !important;
  user-select: none !important;
  pointer-events: none !important;
}

@media (min-width: 640px) {
  .hp-about-image {
    width: 190% !important;
  }
}

@media (min-width: 1024px) {
  .hp-about-image {
    width: 172% !important;
  }
}

.hp-about-content-column {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
}

@media (min-width: 1024px) {
  .hp-about-content-column {
    width: 50% !important;
  }
}

.hp-about-label-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
  user-select: none !important;
  pointer-events: none !important;
  color: #009EE3 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

@media (min-width: 640px) {
  .hp-about-label-wrapper {
    font-size: 14px !important;
  }
}

.hp-about-label-wrapper::before,
.hp-about-label-wrapper::after {
  content: '' !important;
  height: 1px !important;
  background-color: rgba(0, 158, 227, 0.3) !important;
  width: 20px !important;
  display: inline-block !important;
}

.hp-br-sm-inline {
  display: none !important;
}

@media (min-width: 640px) {
  .hp-br-sm-inline {
    display: inline !important;
  }
}

.hp-about-heading,
.hp-about-heading p,
.hp-about-heading h2 {
  color: #0f172a !important;
  font-weight: 900 !important;
  font-size: 24px !important;
  line-height: 1.2 !important;
  margin-bottom: 16px !important;
  letter-spacing: -0.02em !important;
  font-family: 'Inter', sans-serif !important;
}

@media (min-width: 640px) {
  .hp-about-heading,
  .hp-about-heading p,
  .hp-about-heading h2 {
    font-size: 30px !important;
  }
}

@media (min-width: 768px) {
  .hp-about-heading,
  .hp-about-heading p,
  .hp-about-heading h2 {
    font-size: 36px !important;
  }
}

.hp-about-description,
.hp-about-description p {
  color: #475569 !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1.625 !important;
  margin-bottom: 32px !important;
}

@media (min-width: 640px) {
  .hp-about-description,
  .hp-about-description p {
    font-size: 16px !important;
  }
}

.hp-about-badges-wrapper {
  width: 100% !important;
  background-color: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(12px) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(224, 242, 254, 0.3) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
  padding: 16px !important;
  margin-bottom: 32px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

@media (min-width: 640px) {
  .hp-about-badges-wrapper {
    padding: 20px !important;
    flex-direction: row !important;
    justify-content: space-between !important;
  }
}

.hp-about-badges-wrapper .col {
  padding: 0 10px !important;
  flex: 1 !important;
  width: auto !important;
  max-width: none !important;
}

@media (min-width: 640px) {
  .hp-about-badges-wrapper .col {
    padding: 0 20px !important;
  }
  .hp-about-badges-wrapper .col:first-child {
    padding-left: 0 !important;
  }
  .hp-about-badges-wrapper .col:last-child {
    padding-right: 0 !important;
  }
  .hp-about-badges-wrapper .col:not(:last-child) {
    border-right: 1px solid #f1f5f9 !important;
  }
}

@media (max-width: 639px) {
  .hp-about-badges-wrapper .col {
    margin-bottom: 16px !important;
  }
  .hp-about-badges-wrapper .col:last-child {
    margin-bottom: 0 !important;
  }
}

/* Styling for native Flatsome featured_box badge elements */
.hp-about-badge-item.featured-box {
  display: flex !important;
  align-items: center !important;
  text-align: left !important;
}

.hp-about-badge-item.featured-box .icon-box-img {
  margin-bottom: 0 !important;
  margin-right: 12px !important;
}

@media (min-width: 640px) {
  .hp-about-badge-item.featured-box .icon-box-img {
    margin-right: 14px !important;
  }
}

.hp-about-badge-item.featured-box .icon-inner {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background-color: #F0F7FF !important;
  border: 1px solid rgba(224, 242, 254, 0.5) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color 300ms ease !important;
}

@media (min-width: 640px) {
  .hp-about-badge-item.featured-box .icon-inner {
    width: 48px !important;
    height: 48px !important;
  }
}

.hp-about-badge-item.featured-box:hover .icon-inner {
  background-color: rgba(224, 242, 254, 0.6) !important;
}

.hp-about-badge-item.featured-box .icon-inner img {
  width: 20px !important;
  height: 20px !important;
  max-height: 20px !important;
  transition: transform 300ms ease !important;
  object-fit: contain !important;
}

@media (min-width: 640px) {
  .hp-about-badge-item.featured-box .icon-inner img {
    width: 24px !important;
    height: 24px !important;
    max-height: 24px !important;
  }
}

.hp-about-badge-item.featured-box:hover .icon-inner img {
  transform: scale(1.1) !important;
}

.hp-about-badge-title {
  font-weight: 800 !important;
  color: #1e293b !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  font-family: 'Inter', sans-serif !important;
}

@media (min-width: 640px) {
  .hp-about-badge-title {
    font-size: 14px !important;
  }
}

.hp-about-badge-subtitle {
  color: #64748b !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  margin-top: 2px !important;
  margin-bottom: 0 !important;
  line-height: 1 !important;
}

@media (min-width: 640px) {
  .hp-about-badge-subtitle {
    font-size: 12px !important;
  }
}

.hp-about-cta {
  width: 100% !important;
}

@media (min-width: 640px) {
  .hp-about-cta {
    width: auto !important;
  }
}


/* --- HP Voucher Promo Section --- */
.hp-coupon-promo-section {
  width: 100% !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  user-select: none !important;
  background-color: #f8fafc !important;
}

.hp-coupon-blur-1 {
  position: absolute !important;
  left: 5% !important;
  top: 8% !important;
  width: 420px !important;
  height: 420px !important;
  border-radius: 50% !important;
  background: linear-gradient(to bottom right, rgba(186, 230, 253, 0.4), rgba(224, 242, 254, 0.1)) !important;
  filter: blur(64px) !important;
  pointer-events: none !important;
}

.hp-coupon-blur-2 {
  position: absolute !important;
  right: 5% !important;
  bottom: 5% !important;
  width: 480px !important;
  height: 480px !important;
  border-radius: 50% !important;
  background: linear-gradient(to top right, rgba(224, 242, 254, 0.3), transparent) !important;
  filter: blur(64px) !important;
  pointer-events: none !important;
}

.hp-coupon-container {
  max-w-[1400px] !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  position: relative !important;
  z-index: 10 !important;
}

@media (min-width: 640px) {
  .hp-coupon-container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

@media (min-width: 1024px) {
  .hp-coupon-container {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

.hp-coupon-card-outer {
  background-color: #ffffff !important;
  border-radius: 24px !important;
  border: 1px solid rgba(241, 245, 249, 0.7) !important;
  box-shadow: 0 20px 25px -5px rgba(241, 245, 249, 0.8), 0 10px 10px -5px rgba(241, 245, 249, 0.8) !important;
  padding: 24px !important;
  width: 100% !important;
  position: relative !important;
}

@media (min-width: 768px) {
  .hp-coupon-card-outer {
    padding: 32px !important;
  }
}

@media (min-width: 1024px) {
  .hp-coupon-card-outer {
    padding: 40px !important;
  }
}

.hp-coupon-layout {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.hp-coupon-slider-wrapper {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  margin-top: 16px !important;
}

@media (min-width: 1024px) {
  .hp-coupon-slider-wrapper {
    margin-top: 0 !important;
  }
}

.hp-coupon-slider-container {
  overflow: hidden !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.hp-coupon-slider-track {
  display: flex !important;
  gap: 16px !important;
  transition: transform 500ms ease-out;
}

.hp-voucher-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  flex-shrink: 0 !important;
  width: 100% !important;
}

@media (min-width: 768px) {
  .hp-voucher-col {
    width: calc(50% - 8px) !important;
  }
}

.hp-voucher-card-wrapper {
  min-height: 120px !important;
  width: 100% !important;
}

.hp-voucher-card-inner {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
}

.hp-voucher-card-front {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  background-color: #ffffff !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
}

.hp-voucher-left {
  width: 100px !important;
  flex-shrink: 0 !important;
  color: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, #00C2FF 0%, #0084E3 100%) !important;
}

.hp-voucher-hot-badge {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  background-color: #fbbf24 !important;
  color: #ffffff !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  padding: 2px 6px !important;
  border-radius: 999px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  transform: scale(0.9) !important;
  transform-origin: top right !important;
  z-index: 10 !important;
}

.hp-voucher-type-freeship {
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.05em !important;
  transform: rotate(-12deg) !important;
  user-select: none !important;
  text-transform: uppercase !important;
  margin-bottom: 2px !important;
}

.hp-voucher-type-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.85) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  line-height: 1 !important;
  margin-bottom: 6px !important;
}

.hp-voucher-value {
  font-size: 24px !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
}

@media (min-width: 1024px) {
  .hp-voucher-value {
    font-size: 30px !important;
  }
}

.hp-voucher-right {
  flex-grow: 1 !important;
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  text-align: left !important;
  border: 1px solid #f1f5f9 !important;
  border-left: none !important;
  border-radius: 0 8px 8px 0 !important;
}

.hp-voucher-title {
  color: #1e293b !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
  font-family: 'Inter', sans-serif !important;
}

.hp-voucher-expiry {
  display: flex !important;
  align-items: center !important;
  color: #94a3b8 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  gap: 4px !important;
  margin-top: 4px !important;
}

.hp-voucher-expiry-icon {
  width: 14px !important;
  height: 14px !important;
  color: #94a3b8 !important;
  stroke: currentColor !important;
  fill: none !important;
}

.hp-voucher-action-wrapper {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  margin-top: 8px !important;
}

.hp-voucher-btn {
  padding: 6px 14px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.hp-voucher-card-back {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
  text-align: center !important;
  border: none !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 10 !important;
}

.hp-voucher-success-icon-wrapper {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background-color: #10b981 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  margin-bottom: 6px !important;
  box-shadow: 0 4px 6px rgba(16, 185, 129, 0.15) !important;
}

.hp-voucher-success-svg {
  width: 16px !important;
  height: 16px !important;
  stroke: currentColor !important;
  fill: none !important;
}

.hp-voucher-success-title {
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
  color: #065f46 !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

.hp-voucher-success-code {
  font-size: 9px !important;
  font-weight: 900 !important;
  color: #059669 !important;
  margin-top: 4px !important;
  letter-spacing: 0.1em !important;
  background-color: rgba(255,255,255,0.8) !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(16, 185, 129, 0.2) !important;
  text-transform: uppercase !important;
}