/* --- Custom CSS for Product Variations (Mimicking Reference Image) --- */

/* General adjustments for the variations form */
.summary .variations_form {
    margin-bottom: 15px; /* Adjust space below the entire variations form */
}

/* Remove default table borders and adjust spacing for variation rows */
.summary .variations_form table.variations {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 10px;
}

.summary .variations_form table.variations tr {
    border: none !important; /* Remove all borders from rows */
    margin-bottom: 15px; /* Increase space between each attribute row for better separation */
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start; /* Align items to the start for better label-to-options flow */
}

.summary .variations_form table.variations td,
.summary .variations_form table.variations th {
    border: none !important; /* Remove all cell borders */
    padding: 0 !important; /* Remove default padding from cells */
}

.summary .variations_form table.variations th.label {
    padding-right: 20px; /* Space between label and options */
    font-weight: 700;
    color: #333;
    min-width: 80px; /* Adjust label width as needed */
    flex-shrink: 0;
    text-transform: capitalize;
    padding-top: 8px; /* Align label with the top of the option buttons/images */
}

.summary .variations_form table.variations td.value {
    flex-grow: 1;
    display: flex; /* Ensure the value container is a flex container for its items */
    align-items: center; /* Vertically align the swatches */
}

/* Hide the redundant selected variation name next to the label */
.summary .variations_form table.variations th.label .woo-selected-variation-item-name {
    display: none !important;
}

/* Styling for variation swatches wrapper */
.variable-items-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* Space between individual swatch items */
    margin-top: 0px;
    align-items: center;
}

/* Base style for all individual variation items (buttons/images) */
.variable-item {
    border: 1px solid #ccc; /* Subtle border for unselected items */
    border-radius: 4px; /* Slightly less rounded corners */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    min-height: 35px; /* Consistent height for all buttons/images */
}

.variable-item:hover {
    border-color: #facc15; /* Yellow border on hover */
}

.variable-item.selected {
    border-color: #facc15; /* Yellow border for selected item */
    background-color: #fefce8; /* Light yellow background for selected */
    color: #1f2937; /* Darker text for selected */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Subtle shadow for selected */
}

/* Styling for button-like variations (Version, Optional Parts) */
.variable-item.button-variable-item {
    padding: 8px 15px; /* Padding inside the button */
    font-size: 14px; /* Smaller font size for buttons */
    font-weight: 500;
    color: #555;
    background-color: #f9f9f9;
    min-width: 60px; /* Minimum width for buttons */
}

/* Specific styling for color swatches (to show images or actual colors) */
.variable-item.color-variable-item {
    padding: 0; /* Remove padding */
    width: 36px; /* Fixed width for the outer container */
    height: 36px; /* Fixed height for the outer container */
    border-radius: 4px; /* Keep squared corners for image swatches */
    overflow: hidden; /* Ensure image fits */
}

.variable-item-span-color {
    width: 100%; /* Make the span fill the container */
    height: 100%;
    display: block; /* Ensure it's a block for image background */
    background-size: cover; /* Cover the area */
    background-position: center; /* Center the image */
    border-radius: 4px; /* Match outer container radius */
    /* The background-image/color will be set by the plugin's inline style or your custom rules */
}

/* Example for specific color/image if the plugin doesn't inject it */
/* You will need to add rules for each color/image variation you have.
   The `data-value` is usually the slug of your attribute term.
   If your color variations are images, you'd use background-image.
   If they are just solid colors, use background-color.
*/
.variable-item.color-variable-item[data-value="yellow-de"] .variable-item-span-color {
    /* If it's a solid color: */
    background-color: #FFD700 !important; /* Gold/Yellow color */
    /* If it's an image (replace with your actual image URL): */
    /* background-image: url('YOUR_YELLOW_PLANE_IMAGE_URL.jpg') !important; */
}
/* Add more rules for other colors/images like: */
/* .variable-item.color-variable-item[data-value="red"] .variable-item-span-color { background-color: red !important; } */
/* .variable-item.color-variable-item[data-value="blue"] .variable-item-span-color { background-image: url('YOUR_BLUE_PLANE_IMAGE_URL.jpg') !important; } */


/* Hide any unexpected text input fields or original select dropdowns */
.variations_form .woo-variation-raw-select {
    display: none !important;
}
.variations_form .woocommerce-variation-select-options input[type="text"] {
    display: none !important;
}

/* Remove the "Clear" link for variations */
.reset_variations {
    display: none !important;
}

/* Adjustments for the "Add to wishlist" and pincode check elements */
.action-buttons {
    margin-bottom: 0px !important; /* Reduce the gap below the wishlist button container */
}

/* Adjust spacing for the pincode check section */
#shiprocket_pincode_check,
#check_pincode {
    visibility: visible !important;
    margin-top: 5px !important;
}

#pincode_response {
    margin-top: 5px !important;
}

/* Adjust the product title's top margin to create space for the SKU */
.product_title.entry-title {
    margin-top: 20px !important; /* Adjust if needed to prevent overlap with SKU */
    margin-bottom: 5px !important;
}

/* Adjust the margin of the product_meta div itself */
.product_meta {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
}

/* Style the quantity input */
.quantity .input-text.qty.text {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 8px 10px;
    width: 60px;
    text-align: center;
}

/* Style the Add to cart button */
.single_add_to_cart_button.button.alt {
    background-color: #facc15;
    color: #1f2937;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
}

.single_add_to_cart_button.button.alt:hover {
    background-color: #eab308;
    transform: translateY(-1px);
}

/* Ensure quantity and add to cart button are aligned */
.woocommerce-variation-add-to-cart.variations_button {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
}


/* --- Custom CSS for Department Menu Dropdowns (Revised Attempt) --- */

/* Ensure the parent list item is relatively positioned for absolute children */
.departments-menu-v2 .dropdown.menu-item-has-children {
    position: relative !important;
}

/* Base style for all dropdown menus (sub-menus) */
.departments-menu-v2 .dropdown-menu {
    /* Maintain absolute positioning for smooth transitions controlled by JS */
    position: absolute !important;
    top: 100% !important; /* Position it directly below the parent link */
    left: 0 !important;    /* Align it to the left edge of the parent */
    right: auto !important; /* Crucial: Prevent it from aligning to the right */
    min-width: 220px !important; /* Adjust as needed for your sub-category names */
    background-color: #fff !important; /* White background for the dropdown */
    border: 1px solid #e0e0e0 !important; /* Subtle border */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; /* Soft shadow for depth */
    z-index: 1000 !important; /* Ensure it appears above other content */
    padding: 10px 0 !important; /* Vertical padding inside the dropdown */
    border-radius: 8px !important; /* Rounded corners */
    /* Let the theme's JS handle opacity/visibility/display for showing/hiding */
    /* Remove previous display: none !important; from here */
}

/* IMPORTANT: Target the first-level sub-menu when its parent is active/shown */
/* This rule specifically forces the first child dropdown to go down */
.departments-menu-v2 .dropdown.menu-item-has-children.show > .dropdown-menu,
.departments-menu-v2 .dropdown.menu-item-has-children.active > .dropdown-menu {
    left: 0 !important;
    right: auto !important;
    top: 100% !important; /* Ensure it drops directly below */
    margin-left: 0 !important; /* Remove any conflicting left margins */
    /* Do NOT set position: static here, let it remain absolute */
}

/* Style individual items within the dropdown */
.departments-menu-v2 .dropdown-menu li {
    padding: 0 !important;
}

.departments-menu-v2 .dropdown-menu li a {
    display: block !important;
    padding: 8px 20px !important;
    color: #333 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

.departments-menu-v2 .dropdown-menu li a:hover {
    background-color: #f5f5f5 !important;
    color: #facc15 !important;
}

/* For deeper nested dropdowns (sub-sub-menus), keep them opening to the right */
/* This is generally better for usability with multiple levels */
.departments-menu-v2 .dropdown-menu .dropdown-menu {
    top: 0 !important; /* Align to the top of the parent sub-menu item */
    left: 100% !important; /* Open to the right of its direct parent sub-menu item */
    margin-left: 10px !important; /* Small gap between nested dropdowns */
    right: auto !important; /* Ensure it doesn't align right of the viewport */
    /* Make sure these nested dropdowns also have appropriate background/shadow if needed */
    background-color: #fff !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}


/* Hide the arrow that indicates right-side expansion */
.departments-menu-v2 .dropdown-toggle::after {
    display: none !important;
}

/* If your theme uses a specific icon for the arrow, you might need to target it */
/* Example for Font Awesome: */
/*
.departments-menu-v2 .dropdown.menu-item-has-children > a i.fa-chevron-right {
    display: none !important;
}
*/

/* Ensure the main departments menu container allows overflow */
/* This might be handled by the theme's JS, but good to have in CSS */
.departments-menu-v2 .dropdown.show-dropdown {
    overflow: visible !important;
}

/* Adjust the width of the main dropdown if it becomes too narrow */
.departments-menu-v2 .dropdown-menu.yamm {
    width: auto !important;
    min-width: 220px !important;
}

/* Remove any extra lines/borders that might appear from the theme's default styling */
.departments-menu-v2 .dropdown-menu li + li {
    border-top: none !important;
}

/* Ensure the parent li for the top-level categories are block elements for proper flow */
/* This might be redundant if the theme already sets this correctly */
.departments-menu-v2 .menu-item {
    display: block !important;
    width: 100% !important;
}

/* Ensure the main menu wrapper allows its height to adjust */
.departments-menu-v2 {
    height: auto !important;
    overflow: visible !important;
}