/* Front-end SuperGrid card styling */
.product.wcsg-card-product {
    box-sizing: border-box;
}

/* Card wrapper fills the tile */
.wcsg-card {
    height: 100%;
}

/* --- SuperGrid: responsive card media (single source of truth) --- */
/* Media (image or video) – ratio controlled via --wcsg-product-ratio */
.product.wcsg-card-product .wcsg-media {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: var(--wcsg-product-ratio, 150%); /* fallback if JS hasn't run */
    overflow: hidden;

    /* background-image support */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: inherit;
}

/* Background-image version (just a semantic helper) */
.product.wcsg-card-product .wcsg-media.bg-cover {
    background-size: cover;
    background-position: center center;
}

/* Video / iframe fills the box */
.product.wcsg-card-product .wcsg-media video,
.product.wcsg-card-product .wcsg-media iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Overlay flex positioning */
.wcsg-card .wcsg-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    pointer-events: none;
}

/* Horizontal align */
.wcsg-card .wcsg-overlay.wcsg-a-left {
    justify-content: flex-start;
    text-align: left;
}
.wcsg-card .wcsg-overlay.wcsg-a-center {
    justify-content: center;
    text-align: center;
}
.wcsg-card .wcsg-overlay.wcsg-a-right {
    justify-content: flex-end;
    text-align: right;
}

/* Vertical align */
.wcsg-card .wcsg-overlay.wcsg-v-top {
    align-items: flex-start;
}
.wcsg-card .wcsg-overlay.wcsg-v-middle {
    align-items: center;
}
.wcsg-card .wcsg-overlay.wcsg-v-bottom {
    align-items: flex-end;
}

/* Inner overlay block */
.wcsg-card .wcsg-overlay-inner {
    margin: 10px;
    box-sizing: border-box;
}

/* Drag placeholder for SuperGrid card reordering (admin only) */
.wcsg-card-placeholder {
    border: 2px dashed #ccc;
    background: #fafafa;
    min-height: 100px;
    visibility: visible !important;
}

/* Sort handle (for both products and cards) */
.wcsg-sort-handle {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    cursor: move;
}

/* Admin-only card arrange bar (older UI – fine to keep) */
.wcsg-arrange-bar {
    margin-bottom: 15px;
    padding: 10px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.wcsg-arrange-label {
    font-weight: 600;
    margin-right: 8px;
}

.wcsg-arrange-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.wcsg-arrange-item {
    padding: 4px 8px;
    border-radius: 3px;
    border: 1px dashed #999;
    background: #fff;
    cursor: move;
    font-size: 12px;
    white-space: nowrap;
}

/* Admin layout badge */
body.wcsg-layout-mode #wcsg-layout-badge {
    position: fixed;
    top: 90px;
    right: 20px;
    z-index: 9999;
    background: #222;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    opacity: 0.92;
}

body.wcsg-layout-mode #wcsg-layout-badge strong {
    font-weight: 600;
}

body.wcsg-layout-mode #wcsg-layout-badge small {
    display: block;
    font-size: 10px;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.8;
}
/* SuperGrid: make cards same width as products on mobile */
@media (max-width: 1023px) {
    .row.products.row-small.medium-columns-3 > div.product.wcsg-card-product,
    .row.products.row-small.small-columns-2 > div.product.wcsg-card-product {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}
/* Admin layout mode: make SuperGrid cards fill the tile
   just like normal products, even if JS ratio is a bit off */
body.wcsg-layout-mode .row.products .product.wcsg-card-product .wcsg-media {
    padding-top: 150% !important;  /* matches Flatsome 4:5-ish product tiles */
}

/* SuperGrid – nicer aspect ratio on tablets */
@media (min-width: 640px) and (max-width: 1024px) {
    .product.wcsg-card-product .wcsg-media {
        padding-top: 125% !important; /* was 150% fallback – this is less “tall” */
    }
}
/* SuperGrid cards: tablet tweak only (do NOT affect phones or desktop) */
@media (min-width: 768px) and (max-width: 1023px) {
    .row.products.row-small.medium-columns-3 > div.product.wcsg-card-product,
    .row.products.row-small.small-columns-2 > div.product.wcsg-card-product {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 32% !important; /* whatever value was "working" for you */
    }
}