/* Clear out WooCommerce image margins */
.woocommerce-page ul.products li.product a span.twcb-wrapper img.twcb-image,
.woocommerce ul.products li.product a span.twcb-wrapper img.twcb-image
{
    margin: 0 !important; /* Yes, this needs to be here... */
}

/* Attempt to take up the full width, and approximate height of the image being used... 
    Hard to do, because the <a> link tag we're stuck in wraps even the title and price... */
.twcb-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 10;
    display: block;
    width: 100%;
    padding-top: 100%;
}


/* Location positioning */
.twcb-wrapper .twcb-location {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    max-width: 100%;
    overflow: hidden;
	padding: 0.5em;
}

.twcb-wrapper .twcb-location.top-right {
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: end;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start;
}

.twcb-wrapper .twcb-location.bottom-left {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: end;
}

.twcb-wrapper .twcb-location.bottom-right {
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: end;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: end;
}

.woocommerce-page ul.products li.product a span.twcb-wrapper img.twcb-image ~ *,
.woocommerce ul.products li.product a span.twcb-wrapper img.twcb-image ~ *,
.twcb-wrapper .twcb-location * ~ * {
    margin-top: 0.5em !important;
}

/* Position our image */
.twcb-wrapper .twcb-image {
    max-width: 33%;
	height: auto;
}

/* Text tags! */
.twcb-wrapper .twcb-text {
    display: block;
    line-height: 1;
    padding: 0.5em 0.75em;
}
.twcb-wrapper .twcb-text.twcb-text-light {
    color: #222222;
}
.twcb-wrapper .twcb-text.twcb-text-dark {
    color: white;
}
.twcb-wrapper .twcb-location.topleft .twcb-text ~ .twcb-text {
    margin-top: 0.5em;
}