/* ===== Peak64 product cards — final forced (title = full width, max 2 lines)
   MOBILE FIX: first tap on image/card goes straight to product page (no hover overlay) ===== */
:root
{
    --border: rgba(255,255,255,.10);

    --border-strong: rgba(255,255,255,.14);
    --text: #fff; --muted: rgba(255,255,255,.70);
    --pink: #e64686; --blue: #2b63b3; --yellow: #f2df45;
    --card-bg: rgba(0,0,0,.40);
    --shadow: 0 6px 24px rgba(0,0,0,.25);
}

/* spacing */
.woocommerce ul.products
{
    gap: 1.25rem !important;
}

/* Card shell */
.woocommerce ul.products li.product
{
    position: relative !important;

    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
    transform: translateY(0) !important;

    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    background: var(--card-bg) !important;
    box-shadow: var(--shadow) !important;

    backdrop-filter: blur(4px) !important;
}

/* Hover only when hover is supported */
@media (hover:hover)
{
    .woocommerce ul.products li.product:hover
    {
        transform: translateY(-4px) !important;

        border-color: var(--border-strong) !important;
    }
}
@media (hover:none)
{
    .woocommerce ul.products li.product:hover
    {
        transform: none !important;

        border-color: var(--border) !important;
    }
    .woocommerce ul.products li.product .astra-shop-thumbnail-wrap:hover
    {
        transform: none !important;
    }
}

/* Bottom neon hairline */
.woocommerce ul.products li.product::after
{
    position: absolute !important; right: 0 !important; bottom: 0 !important; left: 0 !important; height: 2px !important;

    content: '' !important; pointer-events: none !important;

    background: linear-gradient(90deg,transparent,var(--yellow),transparent) !important;
}

/* Product link (image link) */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link
{
    position: relative !important; z-index: 2 !important;

    display: block !important; overflow: visible !important;

    border-radius: 0 !important; background: none !important;

    aspect-ratio: auto !important;
    touch-action: manipulation !important;
}
@media (hover:none)
{
    .woocommerce ul.products li.product a.woocommerce-LoopProduct-link:hover
    {
        color: inherit !important; background: none !important;
    }
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link::before
{
    content: none !important;
}

/* ---------- Thumbnail ---------- */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap
{
    position: relative !important;

    display: grid !important; overflow: hidden !important;

    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 16px !important;
    background: linear-gradient(
    to bottom right,
    color-mix(in oklab, var(--blue) 20%, transparent),
    color-mix(in oklab, var(--pink) 20%, transparent)
    ) !important;

    place-items: center !important;
    --frame-pad: 16px; --frame-radius: 12px;
    aspect-ratio: 4/3 !important;
    isolation: isolate !important;
    -webkit-mask-image: radial-gradient(#000,#000) !important;
}
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap::before
{
    position: absolute !important; z-index: 1 !important;
    top: var(--frame-pad) !important; right: var(--frame-pad) !important;
    bottom: var(--frame-pad) !important; left: var(--frame-pad) !important;

    content: '' !important; pointer-events: none !important;

    border: 1px solid var(--border) !important;
    border-radius: var(--frame-radius) !important;
    background: #fff !important;
    box-shadow: inset 0 0 40px rgba(255,255,255,.06) !important;
}
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img
{
    position: relative !important; z-index: 2 !important;

    display: block !important;

    width: 100% !important; height: 100% !important; margin: 0 !important;

    border-radius: var(--frame-radius) !important;

    object-fit: contain !important; object-position: center !important;
    -webkit-clip-path: inset(0 round var(--frame-radius)) !important;
            clip-path: inset(0 round var(--frame-radius)) !important;
    filter: drop-shadow(0 6px 20px rgba(0,0,0,.25)) !important;
}

/* Hide Astra image-area overlays on touch */
@media (hover:none)
{
    .woocommerce ul.products li.product .astra-shop-thumbnail-wrap .ast-woo-product-action,
    .woocommerce ul.products li.product .astra-shop-thumbnail-wrap .ast-woo-product-actions,
    .woocommerce ul.products li.product .astra-shop-thumbnail-wrap .added_to_cart,
    .woocommerce ul.products li.product .astra-shop-thumbnail-wrap .add_to_cart_button,
    .woocommerce ul.products li.product .astra-shop-thumbnail-wrap .button,
    .woocommerce ul.products li.product .astra-shop-thumbnail-wrap .ast-quick-view,
    .woocommerce ul.products li.product .astra-shop-thumbnail-wrap .ast-quick-view-text,
    .woocommerce ul.products li.product .astra-shop-thumbnail-wrap .ast-quick-view-icon
    {
        display: none !important; visibility: hidden !important;

        transform: none !important; pointer-events: none !important; opacity: 0 !important;
    }
}

/* ---------- SUMMARY GRID ---------- */
.woocommerce ul.products li.product .astra-shop-summary-wrap
{
    display: grid !important; align-items: center !important;

    padding: 0 .75rem .9rem !important;

    grid-template-columns: minmax(0,1fr) max-content !important;
    grid-template-areas: 'cat   cat'
    'title title'
    'price cta' !important;
    grid-auto-rows: min-content !important;
    row-gap: .25rem !important;
}

/* Category */
.woocommerce ul.products li.product .ast-woo-product-category,
.woocommerce ul.products li.product .ast-woocommerce-product-category,
.woocommerce ul.products li.product .woocommerce-loop-category__title
{
    font-size: .85rem !important;

    margin: .5rem 0 0 !important;

    color: var(--muted) !important;

    grid-area: cat !important;
}

/* Title — FULL ROW (force span 2 columns) */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .ast-woocommerce-product-title,
.woocommerce ul.products li.product .ast-woo-product-title
{
    font-weight: 800 !important; line-height: 1.25 !important;

    display: block !important; overflow: hidden !important;

    width: 100% !important;
    max-height: 2.5em !important; /* ~2 lines */
    margin: .75rem 0 .25rem !important;

    white-space: normal !important; text-overflow: ellipsis !important; word-break: break-word !important;
    /* ✅ critical fix */

    grid-area: title !important;
    grid-column: 1 / -1 !important;   /* span both columns even if grid areas are overridden */
}

/* Price */
.woocommerce ul.products li.product .price
{
    font-size: 1.125rem !important; font-weight: 900 !important;

    display: flex !important; align-items: center !important;

    margin: 0 !important; padding: 0 !important;

    grid-area: price !important;
}
.woocommerce ul.products li.product .price *,
.woocommerce ul.products li.product .price ins,
.woocommerce ul.products li.product .price del
{
    line-height: 1.3 !important; margin: 0 !important; padding: 0 !important;

    text-decoration: none !important; background: none !important;
}

/* Button — summary area */
.woocommerce ul.products li.product .button
{
    font-size: .875rem !important; font-weight: 800 !important; line-height: 1 !important;

    position: relative !important; z-index: 3 !important;

    display: inline-flex !important; align-items: center !important; justify-content: center !important;

    min-width: 48px !important; margin: 0 !important; padding: .5rem .9rem !important;

    transition: transform .12s ease, filter .12s ease, box-shadow .12s ease !important;
    white-space: nowrap !important;

    color: #fff !important; border-radius: 999px !important;
    background: linear-gradient(135deg,var(--pink),var(--blue)) !important;
    box-shadow: 0 10px 24px rgba(43,99,179,.28),
    0 2px 6px rgba(0,0,0,.25),
    inset 0 0 0 1px rgba(255,255,255,.12) !important;

    grid-area: cta !important;
}
.woocommerce ul.products li.product .button:hover
{
    filter: brightness(1.06) !important;
}
.woocommerce ul.products li.product .button:active
{
    transform: translateY(0) scale(.99) !important; filter: brightness(.98) !important;
}
.woocommerce ul.products li.product .button:focus-visible
{
    outline: 2px solid color-mix(in oklab, var(--blue) 65%, white) !important; outline-offset: 2px !important;
}
.woocommerce ul.products li.product .button.loading,
.woocommerce ul.products li.product .button:disabled
{
    cursor: not-allowed !important; opacity: .85 !important;
}

.woocommerce ul.products li.product .button.added,
.woocommerce ul.products li.product a.added_to_cart
{
    min-width: 48px !important; padding: .5rem .9rem !important;

    color: #fff !important; border: 0 !important; border-radius: 999px !important;
    background: linear-gradient(135deg,var(--pink),var(--blue)) !important;
    box-shadow: 0 10px 24px rgba(43,99,179,.28),
    0 2px 6px rgba(0,0,0,.25),
    inset 0 0 0 1px rgba(255,255,255,.12) !important;

    grid-area: cta !important;
}

/* Sale badge */
.woocommerce ul.products li.product .onsale
{
    font-weight: 800 !important;

    top: .75rem !important; left: .75rem !important;

    padding: .25rem .5rem !important;

    text-transform: uppercase !important; color: #fff !important; border-radius: 999px !important;
    background: linear-gradient(90deg,var(--pink),var(--blue)) !important;
}

/* -------------------- MOBILE LAYOUT -------------------- */
@media (max-width:480px)
{
    .woocommerce ul.products
    {
        gap: 1rem !important;
    }
    .woocommerce ul.products li.product
    {
        border-radius: 14px !important;
    }

    .woocommerce ul.products li.product .astra-shop-summary-wrap
    {
        padding: 0 .65rem .8rem !important;

        grid-template-columns: minmax(0,1fr) max-content !important;
        grid-template-areas: 'cat   cat'
        'title title'
        'price cta' !important;
    }

    .woocommerce ul.products li.product .price
    {
        font-size: 1rem !important;
    }

    .woocommerce ul.products li.product .button
    {
        font-size: .8rem !important;

        min-width: 44px !important; padding: .45rem .6rem !important;
    }
    .woocommerce ul.products li.product .button.added
    {
        min-width: 44px !important; padding: .45rem .6rem !important;
    }

    /* Optional: hide the extra “View cart” link to reduce crowding */
    .woocommerce ul.products li.product a.added_to_cart
    {
        display: none !important;
    }
}


/* ===== FIX: make the TITLE row span both columns ===== */

/* 1) Let grid items wrap instead of overflowing (Safari friendly) */
.woocommerce ul.products li.product .astra-shop-summary-wrap > *
{
    min-width: 0 !important;
}

/* 2) Target the ANCHOR that wraps the title (Astra uses a link around <h2>) */
.woocommerce ul.products li.product .astra-shop-summary-wrap > a.ast-loop-product__link,
.woocommerce ul.products li.product .astra-shop-summary-wrap > a.ast-woocommerce-product-title,
.woocommerce ul.products li.product .astra-shop-summary-wrap > a.woocommerce-loop-product__link--title,
/* safety alias */
.woocommerce ul.products li.product .astra-shop-summary-wrap > a:has(.woocommerce-loop-product__title)
{
    display: block !important;            /* fill the grid track */

    width: 100% !important;

    grid-area: title !important;          /* place it in the 'title' row */
    grid-column: 1 / -1 !important;       /* span both columns */
}

/* 3) Keep the <h2> styles as-is, but make sure it fills its parent */
.woocommerce ul.products li.product .woocommerce-loop-product__title
{
    display: block !important;
    overflow: hidden !important;

    width: 100% !important;
    max-height: 2.5em !important;         /* ~2 lines */

    white-space: normal !important;
    text-overflow: ellipsis !important;
    word-break: break-word !important;
}

/* Fallback (if markup differs): any direct child whose class contains "title" spans full width */
.woocommerce ul.products li.product .astra-shop-summary-wrap > *[class*='title']
{
    grid-column: 1 / -1 !important;
}