/*
 * HikaShop Slider. Every look of the slider is a custom property on .hks: a template (or a
 * stylesheet of the merchant) sets them on .hks or on a wrapper around it, no selector to beat.
 */
:where(.hks) {
	--hks-height: clamp(420px, 46vw, 600px);
	--hks-height-mobile: 520px;
	--hks-bg: #1b1b1b;
	--hks-color: #fff;
	--hks-shade: 0, 0, 0;
	--hks-shade-strength: .78;
	--hks-accent: #f0c36a;
	--hks-fade: .6s;
	--hks-content-width: 1280px;
	--hks-card-width: 520px;
	--hks-gutter: 24px;
	--hks-gutter-mobile: 16px;
	--hks-eyebrow-size: .74rem;
	--hks-eyebrow-spacing: .16em;
	--hks-title-font: inherit;
	--hks-title-style: normal;
	--hks-title-weight: 700;
	--hks-title-size: clamp(2.2rem, 5vw, 3.8rem);
	--hks-text-font: inherit;
	--hks-text-color: rgba(255, 255, 255, .88);
	--hks-text-size: 1.05rem;
	--hks-text-transform: none;
	--hks-text-spacing: normal;
	--hks-text-weight: 400;
	--hks-button-bg: #fff;
	--hks-button-color: #111;
	--hks-button-border: transparent;
	--hks-button-hover-bg: #e8e8e8;
	--hks-button-radius: 0;
	--hks-arrow-bg: rgba(0, 0, 0, .45);
	--hks-arrow-color: #fff;
	--hks-arrow-border: rgba(255, 255, 255, .5);
	--hks-arrow-hover-bg: rgba(0, 0, 0, .75);
	--hks-arrow-radius: 0;
	--hks-dot: rgba(255, 255, 255, .5);
	--hks-dot-active: #fff;
}
.hks { position: relative; overflow: hidden; background: var(--hks-bg); color: var(--hks-color); }
.hks-slides { position: relative; min-height: var(--hks-height); }
.hks-slide { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; visibility: hidden; transition: opacity var(--hks-fade), visibility var(--hks-fade); }
.hks-slide.is-active, .hks:not(.is-ready) .hks-slide:first-child { opacity: 1; visibility: visible; }
.hks-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hks-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--hks-shade), var(--hks-shade-strength)) 0%, rgba(var(--hks-shade), calc(var(--hks-shade-strength) * .45)) 55%, rgba(var(--hks-shade), 0) 80%); }
.hks-slide[data-side="right"]::after { background: linear-gradient(270deg, rgba(var(--hks-shade), var(--hks-shade-strength)) 0%, rgba(var(--hks-shade), calc(var(--hks-shade-strength) * .45)) 55%, rgba(var(--hks-shade), 0) 80%); }
.hks-slide[data-side="center"]::after { background: rgba(var(--hks-shade), calc(var(--hks-shade-strength) * .6)); }
.hks-slide-plain::after { display: none; }
.hks-card { position: relative; z-index: 2; width: 100%; max-width: var(--hks-content-width); margin: 0 auto; padding: 0 var(--hks-gutter); box-sizing: border-box; }
.hks-content { max-width: var(--hks-card-width); }
.hks-slide[data-side="right"] .hks-content { margin-left: auto; }
.hks-slide[data-side="center"] .hks-content { margin: 0 auto; text-align: center; }
.hks-eyebrow { margin: 0 0 10px; color: var(--hks-accent); font-size: var(--hks-eyebrow-size); font-weight: 600; letter-spacing: var(--hks-eyebrow-spacing); text-transform: uppercase; }
.hks-title { margin: 0 0 14px; color: var(--hks-color); font-family: var(--hks-title-font); font-style: var(--hks-title-style); font-weight: var(--hks-title-weight); font-size: var(--hks-title-size); line-height: 1.1; }
.hks-text { margin: 0 0 24px; color: var(--hks-text-color); font-family: var(--hks-text-font); font-size: var(--hks-text-size); font-weight: var(--hks-text-weight); line-height: 1.6; letter-spacing: var(--hks-text-spacing); text-transform: var(--hks-text-transform); }
.hks-button { display: inline-block; padding: 12px 26px; background: var(--hks-button-bg); color: var(--hks-button-color); border: 1px solid var(--hks-button-border); border-radius: var(--hks-button-radius); font-weight: 600; text-decoration: none; }
.hks-button:hover, .hks-button:focus-visible { background: var(--hks-button-hover-bg); color: var(--hks-button-color); }
.hks-arrow { position: absolute; top: 50%; z-index: 3; width: 44px; height: 44px; margin-top: -22px; padding: 0; border: 1px solid var(--hks-arrow-border); border-radius: var(--hks-arrow-radius); background: var(--hks-arrow-bg); color: var(--hks-arrow-color); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.hks-arrow:hover, .hks-arrow:focus-visible { background: var(--hks-arrow-hover-bg); }
.hks-arrow[data-prev] { left: 16px; }
.hks-arrow[data-next] { right: 16px; }
.hks-dots { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 3; display: flex; justify-content: center; gap: 4px; }
.hks-dots button { position: relative; width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.hks-dots button::after { content: ""; position: absolute; left: 10px; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--hks-dot); }
.hks-dots button[aria-current="true"]::after { background: var(--hks-dot-active); }
.hks :focus-visible { outline: 2px solid var(--hks-dot-active); outline-offset: 2px; }

@media (max-width: 800px) {
	.hks-slides { min-height: var(--hks-height-mobile); }
	.hks-slide { align-items: flex-end; padding-bottom: 56px; box-sizing: border-box; }
	.hks-slide::after, .hks-slide[data-side="right"]::after, .hks-slide[data-side="center"]::after { background: linear-gradient(0deg, rgba(var(--hks-shade), calc(var(--hks-shade-strength) * 1.1)) 0%, rgba(var(--hks-shade), calc(var(--hks-shade-strength) * .6)) 55%, rgba(var(--hks-shade), 0) 90%); }
	.hks-card { padding: 0 var(--hks-gutter-mobile); }
	.hks-slide[data-side="right"] .hks-content { margin-left: 0; }
	.hks-slide[data-side="center"] .hks-content { text-align: left; margin: 0; }
	.hks-arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.hks-slide { transition: none; }
}