/* Base styles for the overall layout */

/* ===== PRODUCT CARD HOVER EFFECT ===== */
.product-card {
  transition: box-shadow 0.25s ease, border-color 0.25s ease !important;
}
.product-card:hover {
  box-shadow: 0 16px 40px rgba(41, 158, 96, 0.18), 0 4px 12px rgba(0,0,0,0.08) !important;
  border-color: #299E60 !important;
}
.product-card .product-card__thumb img {
  transition: transform 0.35s ease;
}
.product-card:hover .product-card__thumb img {
  transform: scale(1.06);
}

/* Product Details Slideshow Enhancements */
.product-details__images-slider {
  position: relative;
}

.product-details__images-slider .slick-slide {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0 5px;
}

.product-details__images-slider .slick-slide > div {
  transition: transform 0.3s ease;
}

.product-details__images-slider .slick-slide:hover > div {
  transform: translateY(-2px);
}

/* Smooth transitions for thumbnails */
.product-details__images-slider .thum {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
}

/* Active thumbnail styling */
.product-details__images-slider .border-main-600 {
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
}

/* Hover effect for thumbnails */
.product-details__images-slider .hover\:border-main-300:hover {
  border-color: #93c5fd !important;
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.1);
}

/* Slick slider arrow enhancements */
.product-details__images-slider .slick-prev,
.product-details__images-slider .slick-next {
  z-index: 10;
  width: 32px;
  height: 32px;
  transition: all 0.3s ease;
}

.product-details__images-slider .slick-prev:hover,
.product-details__images-slider .slick-next:hover {
  transform: scale(1.1);
}

.product-details__images-slider .slick-prev {
  left: -10px;
}

.product-details__images-slider .slick-next {
  right: -10px;
}

/* Smooth dragging cursor */
.product-details__images-slider .slick-track {
  cursor: grab;
}

.product-details__images-slider .slick-track:active {
  cursor: grabbing;
}

/* Fade effect for main image */
.product-details__left .border.border-gray-100.rounded-16 {
  overflow: hidden;
}

.product-details__left .flex-center img {
  transition: opacity 0.5s ease-in-out;
}

/* Utility classes for transitions */
.transition-all {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cursor-pointer {
  cursor: pointer;
}

.shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .product-details__images-slider .slick-prev {
    left: 0;
  }
  
  .product-details__images-slider .slick-next {
    right: 0;
  }
}

/* =============================================
   Additional UI Effects
   ============================================= */

/* ===== DANH MỤC CON (feature-item) ===== */
.feature-item__thumb {
  transition: box-shadow 0.3s ease, background 0.3s ease !important;
}
.feature-item:hover .feature-item__thumb {
  box-shadow: 0 8px 22px rgba(41, 158, 96, 0.22) !important;
  background: #c6efda !important;
}
.feature-item__thumb img {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.feature-item:hover .feature-item__thumb img {
  transform: scale(1.12);
}
.feature-item__content h6 a {
  transition: color 0.2s ease;
}
.feature-item:hover .feature-item__content h6 a {
  color: #299E60;
}

/* ===== PROMOTIONAL BANNER ===== */
.promotional-banner-item {
  transition: box-shadow 0.3s ease !important;
}
.promotional-banner-item:hover {
  box-shadow: 0 18px 45px rgba(0,0,0,0.18) !important;
}

/* ===== SHIPPING ITEMS (5 tiêu chí) ===== */
.shipping-item {
  transition: transform 0.25s ease, box-shadow 0.25s ease,
              background 0.25s ease !important;
}
.shipping-item:hover {
  transform: translateY(-4px);
  background: #e8f8ef !important;
  box-shadow: 0 10px 28px rgba(41, 158, 96, 0.15) !important;
}

/* ===== NÚT BTN-MAIN ===== */
.btn-main {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.btn-main::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background 0.2s ease;
}
.btn-main:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(41, 158, 96, 0.38) !important;
}
.btn-main:hover::after {
  background: rgba(255,255,255,0.08);
}
.btn-main:active {
  transform: translateY(0);
}

/* ===== SECTION HEADING - underline animation ===== */
.section-heading h5 {
  position: relative;
  display: inline-block;
}
.section-heading h5::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: #299E60;
  border-radius: 2px;
  transition: width 0.4s ease;
}
.section-heading:hover h5::after {
  width: 100%;
}


/* ===== WISHLIST / CART BUTTONS trên card ===== */
.product-card__cart {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.2s ease !important;
}
.product-card__cart:hover {
  transform: scale(1.18) !important;
}

/* ===== BRAND LOGO hover ===== */
.brand-item__img,
.brand-item img {
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: grayscale(20%);
}
.brand-item:hover .brand-item__img,
.brand-item:hover img {
  transform: scale(1.08);
  filter: grayscale(0%);
}

/* ===== DELIVERY / SUB-BANNER ===== */
.delivery-section img {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  border-radius: 16px;
}
.delivery-section img:hover {
  transform: scale(1.012);
  box-shadow: 0 12px 40px rgba(0,0,0,0.14);
}

/* ===== LINK hover (navigation) ===== */
.header-menu a,
.header-nav a {
  position: relative;
}

/* ===== SCROLL TO TOP button ===== */
.scroll-top,
.back-to-top {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.25s ease !important;
}
.scroll-top:hover,
.back-to-top:hover {
  transform: translateY(-4px) scale(1.08) !important;
  box-shadow: 0 8px 22px rgba(41, 158, 96, 0.35) !important;
}

/* ===== FOOTER link hover ===== */
footer a {
  transition: color 0.18s ease, padding-left 0.18s ease;
}
footer a:hover {
  padding-left: 4px;
}

/* ===== SMOOTH FOCUS ring ===== */
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid #299E60;
  outline-offset: 3px;
  border-radius: 4px;
}