/* ------------------------------------------------------------------
 * Letterboxed images need a background or they read as gaps.
 * ---------------------------------------------------------------- */
.woocommerce-product-gallery__image,
.woocommerce-product-gallery img,
.jpc-gallery-thumbs img,
li.product img.wp-post-image {
	background-color: #fff;
}

/* ------------------------------------------------------------------
 * Carousel arrows.
 *
 * The theme ships slick with arrows off and without slick's icon font,
 * so switching them on alone prints the literal words "Previous" and
 * "Next" over the photo. The text is hidden and a chevron drawn as an
 * inline SVG background instead.
 * ---------------------------------------------------------------- */
.woocommerce-product-gallery .slick-arrow,
.jpc-gallery-thumbs .slick-arrow {
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	z-index: 5;
	font-size: 0 !important;
	line-height: 0 !important;
	color: transparent !important;
	text-indent: -9999px;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.55);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px 20px;
	transition: background-color 0.15s ease;
}

.woocommerce-product-gallery .slick-arrow:before,
.jpc-gallery-thumbs .slick-arrow:before {
	content: none !important;
}

.woocommerce-product-gallery .slick-arrow:hover,
.jpc-gallery-thumbs .slick-arrow:hover {
	background-color: #c00;
}

.woocommerce-product-gallery .slick-prev,
.jpc-gallery-thumbs .slick-prev {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'%3E%3Cpath d='M10.5 1.5 2 10l8.5 8.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.woocommerce-product-gallery .slick-next,
.jpc-gallery-thumbs .slick-next {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'%3E%3Cpath d='M1.5 1.5 10 10l-8.5 8.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.woocommerce-product-gallery > .slick-slider .slick-prev,
.woocommerce-product-gallery__wrapper .slick-prev { left: 10px; }
.woocommerce-product-gallery > .slick-slider .slick-next,
.woocommerce-product-gallery__wrapper .slick-next { right: 10px; }

.jpc-gallery-thumbs .slick-arrow {
	width: 28px;
	height: 28px;
	background-size: 9px 15px;
}
.jpc-gallery-thumbs .slick-prev { left: -6px; }
.jpc-gallery-thumbs .slick-next { right: -6px; }

/* ------------------------------------------------------------------
 * Card went white on hover.
 *
 * The product image is absolutely positioned and sized height:100%.
 * Normally .product-thumb-hover is position:static, so that 100%
 * resolves against .item-img, which is 220px tall. On hover the theme
 * switches .product-thumb-hover to position:relative - presumably to
 * position a second, swapped-in image that this catalogue does not
 * have - and that element is 0px tall, so the image collapsed to zero
 * height and the card showed as blank white.
 *
 * Giving the two wrappers a real height keeps the chain intact in both
 * states. Measured: image 313x220 hovered and not hovered.
 * ---------------------------------------------------------------- */
ul.products li.product a.woocommerce-LoopProduct-link,
ul.products li.product .product-thumb-hover {
	height: 100% !important;
}