/* ==========================================================================
   GED Sort Image Products — Frontend CSS
   Gestisce SOLO la griglia, gli addon e i filtri.
   Lo stile dei prodotti è interamente delegato a WooCommerce/tema.
   ========================================================================== */

/* Barra filtri categorie
   ========================================================================== */

.ged-sip-filters {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 32px;
}

.ged-sip-filter-btn {
    position: relative;
    padding: 6px 18px;
    font-size: 15px;
    font-weight: 400;
    color: #aaa;
    background: none;
    border: none;
    cursor: pointer;
    letter-spacing: .01em;
    transition: color .2s ease;
    line-height: 1.5;
}

.ged-sip-filter-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 20px;
    height: 1px;
    background: #111;
    transition: transform .25s ease;
}

.ged-sip-filter-btn:hover {
    color: #111;
}

.ged-sip-filter-btn.is-active {
    color: #111;
    font-weight: 500;
}

.ged-sip-filter-btn.is-active::after {
    transform: translateX(-50%) scaleX(1);
}

/* Griglia — sovrascrive il layout del tema per supportare gli span degli addon.
   Usiamo !important solo sulle proprietà strettamente necessarie per battere
   i float/flex di WooCommerce senza toccare tutto il resto.
   ========================================================================== */

ul.products.ged-sip-grid {
    display: grid !important;
    grid-template-columns: repeat( var(--ged-sip-columns, 3), 1fr ) !important;
    gap: 16px;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Reset float-based layout usato da alcuni temi WooCommerce */
ul.products.ged-sip-grid > li {
    float: none !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    clear: none !important;
}

/* Compatibilita Elementor/temi: alcuni template prodotto stampano una
   seconda immagine per l'effetto hover. Se gli stili WooCommerce del tema
   arrivano tardi, la seconda immagine puo comparire sotto alla prima. Qui la
   manteniamo sovrapposta alla thumbnail principale, senza alterare il layout.
   ========================================================================== */

ul.products.ged-sip-grid > li.product a.woocommerce-LoopProduct-link,
ul.products.ged-sip-grid > li.product a.woocommerce-loop-product__link {
    position: relative;
    display: block;
}

ul.products.ged-sip-grid > li.product a.woocommerce-LoopProduct-link > img,
ul.products.ged-sip-grid > li.product a.woocommerce-loop-product__link > img {
    display: block;
    width: 100%;
    height: auto;
}

ul.products.ged-sip-grid > li.product a.woocommerce-LoopProduct-link > img:not(:first-of-type),
ul.products.ged-sip-grid > li.product a.woocommerce-loop-product__link > img:not(:first-of-type),
ul.products.ged-sip-grid > li.product a.ged-sip-product-link--has-hover-image > img:not(:first-of-type) {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

ul.products.ged-sip-grid > li.product a.woocommerce-LoopProduct-link:hover > img:not(:first-of-type),
ul.products.ged-sip-grid > li.product a.woocommerce-loop-product__link:hover > img:not(:first-of-type),
ul.products.ged-sip-grid > li.product a.ged-sip-product-link--has-hover-image:hover > img:not(:first-of-type) {
    opacity: 1;
}

/* Card addon — occupa lo span impostato dall'admin
   ========================================================================== */

li.ged-sip-card--addon {
    position: relative;
    overflow: hidden;
    border-radius: 4px;  /* lieve, si adatta al tema */
}

.ged-sip-addon-image {
    position: absolute;
    inset: 0;
}

.ged-sip-addon-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: var(--ged-sip-addon-object-position, center center);
    display: block;
}

/* Card nascosta durante il filtro
   ========================================================================== */

.ged-sip-card--hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

/* Responsive — riduce le colonne su schermi piccoli
   ========================================================================== */

@media ( max-width: 900px ) {
    ul.products.ged-sip-grid {
        grid-template-columns: repeat( 2, 1fr ) !important;
    }
}

@media ( max-width: 540px ) {
    ul.products.ged-sip-grid {
        grid-template-columns: 1fr !important;
    }

    /* Su mobile gli span vengono ignorati */
    li.ged-sip-card--addon {
        grid-column: span 1 !important;
        grid-row:    span 1 !important;
    }
}