/*
 * HikaShop card carousel: shared stylesheet.
 *
 * Used by:
 *   - The product page slider (override of show_block_img.php).
 *   - The homepage hero slider (replaces the YOOtheme uk-slideshow-items
 *     section in the home page builder).
 *
 * Both pages render the same .hikashop_slider_carousel_wrap markup, so
 * one stylesheet covers them both. Drop this file once on the site
 * (e.g. via YOOtheme > Theme Customizer > Custom Code > Head as a <link>
 * tag, or copy it into your template's CSS folder and enqueue it) and
 * remove the inline <style> block from show_block_img.php to avoid
 * shipping the same CSS twice.
 */

.hikashop_slider_carousel_wrap {
	/* Per-instance knobs. Override on the wrapper via inline style or a
	   selector to change the card geometry without touching this file.
	   Card aspect ratio = --card-max-width : --card-height; container
	   height tracks --card-height so there is no dead space top/bottom. */
	--card-width: 80%;
	--card-max-width: 360px;
	--card-height: 360px;
	--carousel-min-width: 600px;
	--container-max-width: 600px;
	--container-padding: 10px;
	/* Card frame knobs. Defaults preserve the product page look (thin
	   white inner padding, rounded corners, soft drop shadow). Set any
	   of them to 0 / none on a homepage hero to get an edge-to-edge,
	   sharp-cornered, shadow-less look that matches a stock slideshow. */
	--card-padding: 1px;
	--card-background: whitesmoke;
	--card-border-radius: 8px;
	--card-shadow: 0 6px 18px rgba(0,0,0,.12);
	--card-shadow-highlight: 0 10px 28px rgba(0,0,0,.22);
	margin: 24px auto 0; max-width: 100%;
}
.hikashop_slider_carousel_wrap .hk-carousel-hint { text-align: center; margin: 0 0 8px; opacity: .65; font-size: 14px; }
.hikashop_slider_carousel_wrap .hk-carousel-container {
	position: relative !important;
	max-width: var(--container-max-width);
	height: calc(var(--card-height) + (2 * var(--container-padding)));
	margin: 0 auto;
	overflow: hidden;
	padding: var(--container-padding);
}
.hikashop_slider_carousel_wrap .hk-card-carousel {
	position: relative; z-index: 1;
	margin: 0 auto;
	width: 100%;
	height: var(--card-height);
	transition: filter .3s ease;
}
/* When sliding via the prev/next buttons (or settling after a drag), the
   cards glide to their new spot instead of snapping. The transition has to
   sit on the cards themselves (they are what moves), not on the carousel. */
.hikashop_slider_carousel_wrap .hk-card-carousel.smooth-return .hk-card { transition: transform .28s ease, left .28s ease, opacity .28s ease; }
.hikashop_slider_carousel_wrap .hk-card {
	background: var(--card-background);
	width: var(--card-width);
	max-width: var(--card-max-width);
	height: var(--card-height);
	text-align: center;
	padding: var(--card-padding);
	position: absolute;
	top: 0; left: 50%;
	transform-origin: center center;
	will-change: transform, left, opacity;
	box-shadow: var(--card-shadow);
	border-radius: var(--card-border-radius);
	overflow: hidden;
}
.hikashop_slider_carousel_wrap .hk-card.highlight { box-shadow: var(--card-shadow-highlight); }
.hikashop_slider_carousel_wrap .hk-image-container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.hikashop_slider_carousel_wrap .hk-image-container img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; pointer-events: none; }
.hikashop_slider_carousel_wrap .hk-carousel-nav {
	/* !important guards against template/UIkit button resets that would
	   otherwise drop the absolute positioning and stack the buttons above
	   the slider instead of flanking it left/right. */
	position: absolute !important; top: 50% !important; bottom: auto !important;
	transform: translateY(-50%) !important;
	z-index: 10; width: 44px !important; height: 44px !important; min-width: 0 !important;
	margin: 0 !important; border-radius: 50%;
	border: 0; background: rgba(0,0,0,.45); color: #fff;
	font-size: 28px; line-height: 1; cursor: pointer; padding: 0;
	display: flex !important; align-items: center; justify-content: center;
}
.hikashop_slider_carousel_wrap .hk-carousel-nav:hover { background: rgba(0,0,0,.65); }
.hikashop_slider_carousel_wrap .hk-carousel-prev { left: 8px !important; right: auto !important; }
.hikashop_slider_carousel_wrap .hk-carousel-next { right: 8px !important; left: auto !important; }
.hikashop_slider_carousel_wrap .visuallyhidden {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
@media screen and (max-width: 640px) {
	.hikashop_slider_carousel_wrap .hk-carousel-hint { display: block; }
}
@media (hover: hover) and (pointer: fine) {
	.hikashop_slider_carousel_wrap .hk-carousel-hint { display: none; }
}