/* Your custom CSS here */

/* Centre the favourite heart and the package badge inside their buttons */
.item-list .make-favorite {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	line-height: 1;
	font-size: 0;
	vertical-align: middle;
}

.item-list .make-favorite > i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1em;
	height: 1em;
	margin: 0;
	font-size: var(--bs-btn-font-size, 0.75rem);
	line-height: 1;
}

.item-list .make-favorite > i::before {
	line-height: 1;
	vertical-align: 0;
}

.item-list .make-favorite span {
	display: inline-block;
	width: 0;
	max-width: 0;
	margin: 0;
	overflow: hidden;
	font-size: 0;
	line-height: 1;
	white-space: nowrap;
	vertical-align: middle;
}

.item-list:hover .make-favorite {
	width: auto;
	padding-inline: 0.65rem;
	gap: 0.5rem;
}

.item-list:hover .make-favorite span {
	width: auto;
	max-width: none;
	font-size: var(--bs-btn-font-size);
}

/*
 * Listing photos share one frame, but the whole picture stays visible.
 * Cover-cropping cut off heads and legs and looked broken.
 */
.featured-list-slider > div {
	width: 220px;
}

.featured-list-slider .item.card {
	width: 100%;
	overflow: hidden;
}

.featured-list-slider .item.card > .card-body.h-100 {
	height: auto !important;
	flex: 1 1 auto;
	min-height: 0;
}

.grid-view .item-list > .border {
	overflow: hidden;
}

/* Only the photo box is narrowed. Row gutters stay, so the title and price
   keep their original place inside the card. */
.grid-view .main-image > .container {
	width: calc(100% - 2rem) !important;
	max-width: none !important;
	margin-left: 1rem !important;
	margin-right: 1rem !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	flex: 0 0 auto;
}

.item-carousel-thumb,
.main-image > .position-relative,
.add-img-td > a {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	flex: 0 0 auto;
	background-color: var(--bs-tertiary-bg);
}

.item-carousel-thumb,
.main-image > .position-relative {
	border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
}

.list-view .main-image > .position-relative,
.add-img-td > a {
	border-radius: var(--bs-border-radius);
}

.item-carousel-thumb > .position-absolute,
.main-image .position-absolute {
	z-index: 2;
}

.item-carousel-thumb > a,
.main-image > .position-relative > a {
	position: absolute;
	inset: 0;
	display: block;
}

.item-carousel-thumb picture,
.main-image > .position-relative picture,
.add-img-td picture {
	display: block;
	width: 100%;
	height: 100%;
}

.item-carousel-thumb img,
.main-image > .position-relative img,
.add-img-td img {
	display: block;
	width: 100%;
	height: 100% !important;
	max-width: none;
	padding: 0;
	object-fit: contain;
	object-position: center;
}

.add-img-td img.img-thumbnail {
	border: 0;
}

.gallery-container .main-gallery,
.gallery-container .carousel-inner,
.gallery-container .bx-wrapper {
	width: 100%;
	height: auto !important;
	aspect-ratio: 16 / 9;
	max-height: 520px;
	overflow: hidden;
	background-color: var(--bs-tertiary-bg);
}

.gallery-container .main-gallery .swiper-wrapper,
.gallery-container .main-gallery .swiper-slide,
.gallery-container .carousel-item,
.gallery-container .bx-viewport,
.gallery-container .bx-viewport .bxslider,
.gallery-container .bx-item {
	height: 100% !important;
}

.gallery-container .main-gallery .swiper-slide,
.gallery-container .carousel-item,
.gallery-container .bx-item {
	position: relative;
}

.gallery-container .main-gallery .swiper-slide picture,
.gallery-container .carousel-item picture,
.gallery-container .bx-item picture {
	display: block;
	width: 100%;
	height: 100%;
}

.gallery-container .main-gallery .swiper-slide img,
.gallery-container .carousel-item img,
.gallery-container .bx-item img,
.gallery-container .bxslider img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100% !important;
	max-width: none;
	margin: 0;
	object-fit: contain;
	object-position: center;
}

.thumbs-gallery .swiper-slide,
.bxslider-pager .bx-thumb-item {
	overflow: hidden;
}

.thumbs-gallery .swiper-slide img,
.bxslider-pager .bx-thumb-item img {
	width: 100%;
	height: 100% !important;
	object-fit: contain;
	object-position: center;
}