<div id="wpsis-status">

        <strong>Loading products...</strong>

    </div>

<div id="wpsis-products-list">

    <ul></ul>

</div>

<div id="wpsis-gallery-modal" class="wpsis-modal">

    <div class="wpsis-modal-content">

        <span class="wpsis-close">&times;</span>

        <div class="wpsis-gallery-items"></div>

    </div>

</div>

<style type="text/css">

div#wpsis-status{

	position: relative;

	top: 0px;

	right: 0px;

	background: rgb(34, 113, 177);

	color: white;

	padding: 10px 16px;

	border-radius: 6px;

	box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 12px;

	z-index: 9999;

	font-size: 14px;

	transition: opacity 0.3s;

	display: none;

}

/* ===============================

   WPSIS – Woo Products Image Linker

   =============================== */

#wpsis-products-list {

    background: #f6f7f9;

    padding: 12px;

    border-radius: 6px;

    max-height: 75vh;

    overflow-y: auto;

}

/* Base UL reset */

#wpsis-products-list ul {

    list-style: none;

    margin: 0;

    padding: 0;

}

/* Product row */

.wpsis-product {

    background: #ffffff;

    border: 1px solid #e2e4e7;

    border-radius: 6px;

    padding: 12px;

    margin-bottom: 10px;

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    transition: box-shadow 0.15s ease, border-color 0.15s ease;

}

.wpsis-product:hover {

    border-color: #2271b1;

    box-shadow: 0 2px 6px rgba(0,0,0,0.05);

}

/* Product title & price */

.wpsis-product > strong {

    font-size: 14px;

    color: #1d2327;

    display: block;

    margin-bottom: 4px;

}

/* Image wrapper */

.wpsis-image-wrapper {

    display: flex;

    flex-direction: column;

    align-items: center;

    min-width: 90px;

}

/* Product / variation image */

.wpsis-product-image {

    width: 80px;

    height: 80px;

    object-fit: cover;

    border: 1px dashed #c3c4c7;

    border-radius: 4px;

    background: #f0f0f1;

    cursor: pointer;

    transition: border-color 0.15s ease, background 0.15s ease;

}

.wpsis-product-image:hover {

    border-color: #2271b1;

    background: #ffffff;

}

/* Attachment ID input */

.wpsis-image-id-input {

    margin-top: 6px;

    width: 70px;

    padding: 4px 6px;

    font-size: 12px;

    border-radius: 4px;

    border: 1px solid #c3c4c7;

    text-align: center;

}

.wpsis-image-id-input:focus {

    border-color: #2271b1;

    box-shadow: 0 0 0 1px #2271b1;

    outline: none;

}

/* ===============================

   Variations

   =============================== */

.wpsis-variations {

    margin-top: 10px;

    padding-left: 14px;

    border-left: 3px solid #e2e4e7;

}

.wpsis-variation {

    background: #fbfbfc;

    border: 1px solid #e6e7e9;

    border-radius: 5px;

    padding: 8px 10px;

    margin-bottom: 6px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.wpsis-variation:hover {

    border-color: #8c8f94;

}

/* Variation image smaller */

.wpsis-variation .wpsis-product-image {

    width: 65px;

    height: 65px;

}

/* ===============================

   Performance helpers

   =============================== */

.wpsis-product,

.wpsis-variation {

    contain: content;

}

/* Optional loading state */

.wpsis-loading {

    opacity: 0.6;

    pointer-events: none;

}

/* ===============================

   Collapsible Variations

   =============================== */

/* Header area (clickable) */

.wpsis-product-header {

    display: flex;

    gap: 10px;

    flex: 1;

    cursor: pointer;

    user-select: none; /* Better UX */

}

/* Toggle icon */

.wpsis-toggle {

    width: 24px;

    height: 24px;

    border-radius: 50%;

    background: #f0f0f1;

    border: 1px solid #c3c4c7;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 14px;

    color: #50575e;

    flex-shrink: 0;

    transition: 

        transform 0.2s ease,

        background 0.2s ease,

        border-color 0.2s ease,

        color 0.2s ease,

        opacity 0.2s ease;

    opacity: 0.85; /* slightly softer when visible */

}



/* Hover effect (only when visible/loaded) */

.wpsis-product.has-variations.variations-loaded .wpsis-toggle:hover {

    background: #ffffff;

    border-color: #2271b1;

    color: #2271b1;

    opacity: 1;

    box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.15); /* subtle focus ring */

}



/* Rotate when expanded */

.wpsis-product:not(.collapsed) .wpsis-toggle {

    transform: rotate(90deg);

}



/* Hide toggle until variations are actually loaded */

.wpsis-product.has-variations .wpsis-toggle {

    display: none;

}



/* Show only after variations are appended and class is added */

.wpsis-product.has-variations.variations-loaded .wpsis-toggle {

    display: flex;

}



/* Optional: make header look inactive until loaded */

.wpsis-product.has-variations:not(.variations-loaded) .wpsis-product-header {

    cursor: default;

    opacity: 0.7;

}

/* Variations hidden by default */

.wpsis-product.collapsed .wpsis-variations {

    display: none;

}

/* Rotate icon when open */

.wpsis-product:not(.collapsed) .wpsis-toggle {

    transform: rotate(90deg);

}

/* Improve visual hierarchy */

.wpsis-product.has-variations {

    padding-left: 10px;

}

.wpsis-product.has-variations > .wpsis-image-wrapper {

    margin-left: auto;

}

/* Modal for gallery */

.wpsis-modal {

    display: none;

    position: fixed;

    z-index: 10000;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    overflow: auto;

    background-color: rgba(0,0,0,0.5);

}

.wpsis-modal-content {

    background-color: #fefefe;

    margin: 15% auto;

    padding: 20px;

    border: 1px solid #888;

    width: 80%;

    max-width: 800px;

    border-radius: 8px;

}

.wpsis-close {

    color: #aaa;

    float: right;

    font-size: 28px;

    font-weight: bold;

    cursor: pointer;

}

.wpsis-close:hover,

.wpsis-close:focus {

    color: black;

    text-decoration: none;

}

.wpsis-gallery-items {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 20px;

}

.wpsis-gallery-item {

    width: 100px;

    height: 100px;

    object-fit: cover;

    border: 1px solid #ddd;

    border-radius: 4px;

    cursor: pointer;

    transition: border-color 0.15s ease;

}

.wpsis-gallery-item:hover {

    border-color: #2271b1;

}

#wpsis-status {

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

}

#wpsis-status strong {

    color: #fff;

}

div#wpsis-products-list li textarea{

	display:none;

}

</style>