/*
Theme Name: Elessi VD Child Theme
Theme URI: https://vidieu.vn
Author: Vidieu Team
Author URI: https://vidieu.vn
Description: New child theme for Elessi - Clean redesign starting point for Vidieu.vn
Template: elessi-theme
Version: 2.0.0
License: GPL v2 or later
Text Domain: elessi-vd-child
Last Updated: 2025-11-01
*/

/* ==========================================================================
   Custom Styles for VD Child Theme
   ========================================================================== */

/* Add your custom CSS below this line */

/* Basic Reset */
* {
    box-sizing: border-box;
}

/* Custom Styles - To be added during redesign */

/* ==========================================================================
   Product Attribute Selector Positioning Fix (JavaScript-based)
   ========================================================================== */

/*
 * REQUIREMENT:
 *   1. Cạnh TRÊN của select-wrap = Cạnh TRÊN của thumbnail
 *   2. Cạnh DƯỚI của select-wrap cách cạnh DƯỚI của thumbnail = 70px
 *   3. Khi có nhiều attributes → scroll, không kéo dài vượt thẻ sản phẩm
 *
 * PROBLEM:
 *   - .nasa-product-content-select-wrap positioned absolute relative to .info
 *   - .info có position: relative (CANNOT change - breaks .nasa-sc-pdeal-countdown)
 *   - .product-img-wrap (contains thumbnail) is sibling of .info
 *   - Image height is DYNAMIC (responsive) - khác nhau cho mỗi product
 *
 * SOLUTION:
 *   - Use JavaScript to calculate actual height của .product-img-wrap
 *   - Set 2 CSS variables cho mỗi .product-item:
 *     1. --img-wrap-height: Dùng để tính top positioning
 *     2. --max-selector-height: Dùng để giới hạn chiều cao (img-height - 70px)
 *   - CSS sử dụng variables để position và limit height chính xác
 *   - Add overflow-y: auto để scroll nếu content vượt quá max-height
 *   - JavaScript runs on: DOMContentLoaded, window.load, window.resize
 */

.product-item .nasa-product-content-select-wrap {
  /* Remove bottom positioning */
  bottom: auto !important;

  /* Position from top with negative offset calculated by JavaScript */
  /* Offset = -(img-wrap actual height + info padding-top) */
  top: calc(var(--img-wrap-height, 0px) * -1 - 10px);

  /* LIMIT HEIGHT: Bottom edge should be 70px above img-wrap bottom */
  /* Max-height = img-wrap height - 70px (calculated by JavaScript) */
  max-height: var(--max-selector-height, 200px) !important;

  /* Add scrollbar if content exceeds max-height */
  overflow-y: auto;

  /* Keep left positioning */
  left: 2px;
}

/* Adjust hover transform - remove Y offset to prevent jumping */
.product-item:hover .nasa-product-content-select-wrap,
.product-item.nasa-mobile-hover .nasa-product-content-select-wrap {
  -webkit-transform: translate(3px, 0) !important;
  -moz-transform: translate(3px, 0) !important;
  -o-transform: translate(3px, 0) !important;
  -ms-transform: translate(3px, 0) !important;
  transform: translate(3px, 0) !important;
}

/* Custom scrollbar styling for selector (optional, for better UX) */
.product-item .nasa-product-content-select-wrap::-webkit-scrollbar {
  width: 6px;
}

.product-item .nasa-product-content-select-wrap::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.product-item .nasa-product-content-select-wrap::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

.product-item .nasa-product-content-select-wrap::-webkit-scrollbar-thumb:hover {
  background: #555;
}