/* ==========================================================================
   Desktop (≥1024px)
   ========================================================================== */

@media (min-width: 1024px) {

  .swiper-list-product .swiper-pagination {
    display: none !important;
  }

  /* Quick view: fade + slide up on hover */
  .quick-view-wrapper {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    will-change: opacity, transform;
    pointer-events: none;
  }

  .product-item:hover .quick-view-wrapper {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

/* ============================================
     COLOR ITEM - DESKTOP HOVER & SIZE UPDATES
     ============================================ */

  .product-item .color-item {
    /* Increased radius/size from 28px to 34px */
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  }

  .product-item .color-item:hover {
    transform: scale(1.08) !important; /* Slightly more prominent pop on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  }

  /* The Tooltip Box (Moved a little higher top) */
  .product-item .color-item .tag-action {
    display: block !important;
    position: absolute !important;
    bottom: 135% !important; 
    left: 50% !important;
    transform: translateX(-50%) translateY(4px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
    z-index: 50 !important;
    background-color: #000000 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
    
    /* Adjusted padding: More top padding, less bottom padding to push text down */
    padding: 5px 8px 3px 8px !important; 
    line-height: 1.2 !important;
  }

  /* Reveal Tooltip on Hover */
  .product-item .color-item:hover .tag-action {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
  }
}

/* ==========================================================================
   Mobile (≤1024px) — tap-to-reveal & overlay fixes
   ========================================================================== */

@media (max-width: 1024px) {

  /* ----------------------------------
     Product Container Context
     ---------------------------------- */
  .product-item .product-infor,
  .product-item {
    position: relative;
  }

  .product-item .product-infor {
    min-height: 80px;
  }

  /* ----------------------------------
     Quick view panel (fade + slide up on tap)
     ---------------------------------- */
  .quick-view-wrapper {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    z-index: 20;
  }

  .product-item.is-active .quick-view-wrapper {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }

  /* ----------------------------------
     Product name (fades out in place)
     ---------------------------------- */
  .product-item .product-name {
    opacity: 1;
    transition: opacity 0.25s ease;
    margin-bottom: 5px;
  }

  .product-item.is-active .product-name {
    opacity: 0 !important;
    pointer-events: none !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  /* ----------------------------------
     Price block - DISAPPEARS WHEN GOES DOWN
     ---------------------------------- */
  .product-item .product-price-block {
    opacity: 1;
    transform: translateY(0);
    max-height: 50px;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-bottom: 5px;
  }

  .product-item.is-active .product-price-block {
    opacity: 0 !important;
    transform: translateY(20px) !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
  }

  /* ----------------------------------
     Color panel - Mobile
     ---------------------------------- */
  .product-item .mobile-interactive-panel {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 8px 0 !important;
    background: transparent !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease !important;
    pointer-events: none !important;
    z-index: 40 !important; /* UPGRADED: Pushes color container context above quick view/wishlist layers */
    display: block !important;
  }

  .product-item.is-active .mobile-interactive-panel {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }

  /* Color list container */
  .product-item .mobile-interactive-panel .list-color {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    direction: rtl !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    background: transparent !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* ============================================
     COLOR ITEM - MOBILE (HOVER ALLOWED, NO SELECTION)
     ============================================ */

  .product-item .color-item {
    width: 30px !important;  /* Matches your desktop update size layout context */
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin: 2px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative !important;
    
    /* Allow pointer events so hover tooltips can display */
    pointer-events: auto !important; 
    cursor: default !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  /* Ultimate Tooltip Box (Always positions flawlessly on top of all card layers) */
  .product-item .color-item .tag-action {
    display: block !important;
    position: absolute !important;
    bottom: 130% !important; /* Sits cleanly above the color circle */
    left: 50% !important;
    transform: translateX(-50%) translateY(4px) !important;
    z-index: 9999 !important; /* SUPREME HIERARCHY: Overlaps structural components completely */
    background-color: #000000 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
    
    /* Smooth transition and text layouts */
    padding: 5px 8px 3px 8px !important; 
    line-height: 1.2 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
  }

  /* Reveal Tooltip on Mobile Hover or Touch Hold states */
  .product-item .color-item:hover .tag-action,
  .product-item .color-item:active .tag-action {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
  }

  /* For very light colors, add a subtle border */
  .product-item .color-item[style*="background-color: #ffffff"],
  .product-item .color-item[style*="background-color: #fff"],
  .product-item .color-item[style*="background-color: #f8f8f8"],
  .product-item .color-item[style*="background-color: #f9f9f9"],
  .product-item .color-item[style*="background-color: #fafafa"],
  .product-item .color-item[style*="background-color: white"] {
    border-color: #999 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
  }

  /* Remove scale/click transformations on mobile */
  .product-item .color-item:active {
    transform: none !important;
  }

  /* ----------------------------------
     Wishlist mobile layout
     ---------------------------------- */
  .list-action-right {
    z-index: 30 !important;
    pointer-events: auto !important;
  }

  .list-action-right .tag-action {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* ----------------------------------
     ADD SMOOTH TRANSITION FOR ALL ELEMENTS
     ---------------------------------- */
  .product-item .product-infor > * {
    transition: all 0.3s ease;
  }

  /* Ensure quick view wrapper slides down smoothly */
  .product-item .quick-view-wrapper {
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
}
.product-item .product-img {
  position: relative;
}

.product-item .product-img > img[data-index="1"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s ease;
}

@media (hover: hover) {
  .product-item:hover .product-img > img[data-index="1"] {
    opacity: 1;
  }
}