.product-banner {
    width: 100%;
}

.product-item {
    cursor: pointer;
}

/* Fixed card size requested: width 274px x height 332px */
.product-card {
    box-sizing: border-box;
    border-radius: 8px;
    padding: 0;
    width: 274px;        /* fixed width */
    height: 332px;       /* fixed height */
    display: block;      /* avoid inline-block whitespace */
    vertical-align: top;
    overflow: hidden;
}

/* If you render cards inside a container and want them to wrap neatly,
   use a flex parent. Add class "products-grid" to the wrapper (see note). */
.products-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px; /* adjust spacing between cards */
    align-items: flex-start;
}

/* Product name / description area */
.product-item-name {
    margin: 0.25em 0;
    font-size: 16px;
    font-weight:bold;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines to show */
    -webkit-box-orient: vertical;
}

/* Image wrapper: keep exact image area for the fixed card height */
.product-card .product-img-wrapper {
    border-radius: 8px 8px 0 0;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-color: #f8f9fa;
}

.product-card .product-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
}

/* keep normal card-body spacing but allow desc to grow */
.product-item-desc {
    height: calc(100% - 220px); /* ensures desc fits the remaining card space */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* remove extra top margin wrapper (if present) */
.product-card > .card-img-top-wrapper {
    margin: 0;
}

/* sold-out overlay stays positioned over the image */
.product-card .sold-out {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #E9EEF1 0% 0% no-repeat padding-box;
    z-index: 5;
    overflow: hidden; /* ensure rotated text doesn't leak */
}

    .product-card .sold-out div {
        background: #2B212B 0% 0% no-repeat padding-box;
        position: absolute;
        width: auto; /* don't force full width (avoids overflow) */
        white-space: nowrap;
        color: #fff;
        font-size: xx-large;
        font-weight: bolder;
        text-align: center;
    }

/* keep other styles unchanged below */

.product-select-layout {
    min-width: 70px;
    border: 1px solid #F0F0F0;
    border-radius: 10px;
    padding: 0 10px;
    font-size: large;
    font-weight: bold
}

.product-item-from-dashed {
    font-size: smaller;
    text-decoration: line-through;
    height: 10px;
    margin-right: 1em;
}

.product-item-price {
    font-size: 16px;
    font-weight: bold;
}

.product-item-desc > .product-price-highlight {
    color: #EF5360;
    height: 18px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}

.product-price-highlight {
    color: #EF5360;
}

.uppercase {
    text-transform: uppercase;
}

select.product-select-layout {
    cursor: pointer;
}

select:focus-visible {
    outline: none;
}

#shop-info #fade {
    position: absolute;
    z-index: 1;
    bottom: 2em;
    left: 0;
    pointer-events: none;
    background-image: linear-gradient(to bottom, rgba(255,255,255, 0), rgba(255,255,255, 1) 90%);
    width: 100%;
}

#shop-info {
}

    #shop-info #collapse-desc.collapse[aria-expanded="false"] {
        height: 86px !important;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    #shop-info #fade[aria-expanded="false"] {
        display: block;
        height: 4em !important;
    }

    #shop-info #collapse-desc.collapsing[aria-expanded="false"] {
        height: 86px !important;
    }

    #shop-info #fade[aria-expanded="true"] {
        height: 0 !important;
    }

    #shop-info a.uppercase {
        text-align: center;
        margin: auto;
        display: block;
    }

        #shop-info a.uppercase:hover {
            text-decoration: none;
        }

    #shop-info a i {
        text-align: center;
        margin: auto;
        display: inline-block;
    }

    #shop-info a[aria-expanded=true] i {
        transform: rotate(180deg);
    }

.sold-out {
    background: #000;
    opacity: 0.7;
    z-index: 2;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

    .sold-out span {
        background: #cfcfd1 0% 0% no-repeat padding-box;
        color: #2B212B;
        font-size: xx-large;
        font-weight: bolder;
        text-align: center;
        position: absolute;
        top: 40%;
        width: 100%;
    }

.exclude-vat {
    color: #A7A7A7;
    border: 1px #A7A7A7 solid;
    font-size: 10px;
    border-radius: 0.25em;
    display: inline-block;
    padding: 0.25em;
    margin: 0.5em 0.5em 0.5em 0em;
}

.discount-tag {
    border: 1px #EF5360 solid;
    color: #EF5360;
    font-size: 10px;
    font-weight: bold;
    display: inline-block;
    padding: 0.25em;
    border-radius: 0.25em;
    margin: 0.5em 0.5em 0.5em 0em;
}

#old-price {
    text-decoration: line-through;
    color: gray;
    font-weight: normal;
    margin-right: 0.5em;
    font-size: small;
}

.products-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px; /* adjust spacing between cards */
    align-items: flex-start;
}