/* Remove main content top gap when category banner is present. */
body.oceaniclink-has-cat-gallery .site-main,
body.oceaniclink-has-cat-gallery #primary .site-main {
	padding-top: 0;
}

.woocommerce-products-header .oceaniclink-cat-gallery-outer {
	margin-bottom: 1rem;
}

.oceaniclink-cat-gallery-outer,
.oceaniclink-cat-gallery-outer *,
.oceaniclink-cat-gallery-outer *::before,
.oceaniclink-cat-gallery-outer *::after {
	box-sizing: border-box;
}

.oceaniclink-cat-gallery-outer {
	width: 100%;
	max-width: 100%;
	margin-bottom: 1.5rem;
}

/* Full width — breaks out of theme content column to viewport width. */
.oceaniclink-cat-gallery-outer--full {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Container width — centered box aligned with shop/content column. */
.oceaniclink-cat-gallery-outer--container {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.oceaniclink-cat-gallery-outer--container .oceaniclink-cat-gallery__box {
	width: 100%;
	max-width: var(--oceaniclink-cat-gallery-max-width, 1600px);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--oceaniclink-cat-gallery-gutter-left, 1.618em);
	padding-right: var(--oceaniclink-cat-gallery-gutter-right, 1.618em);
}

.oceaniclink-cat-gallery-outer--container .oceaniclink-cat-gallery {
	overflow: hidden;
	width: 100%;
}

.oceaniclink-cat-gallery {
	position: relative;
	display: block;
	width: 100%;
}

.oceaniclink-cat-gallery__viewport {
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.oceaniclink-cat-gallery__viewport::-webkit-scrollbar {
	display: none;
}

.oceaniclink-cat-gallery__track {
	display: flex;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* One slide = full width of the slider viewport. */
.oceaniclink-cat-gallery__slide {
	flex: 0 0 100%;
	width: 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.oceaniclink-cat-gallery__img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	vertical-align: middle;
}

/* Prev / next — bottom right inside slider */
.oceaniclink-cat-gallery__controls {
	position: absolute;
	right: max(0.75rem, env(safe-area-inset-right));
	bottom: max(0.75rem, env(safe-area-inset-bottom));
	left: auto;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	transform: none;
	padding: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.oceaniclink-cat-gallery-outer .oceaniclink-cat-gallery__controls .oceaniclink-cat-gallery__btn,
.oceaniclink-cat-gallery-outer .oceaniclink-cat-gallery__controls .oceaniclink-cat-gallery__btn--prev,
.oceaniclink-cat-gallery-outer .oceaniclink-cat-gallery__controls .oceaniclink-cat-gallery__btn--next {
	position: static;
	transform: none;
	min-width: 4.25rem;
	height: 2.5rem;
	padding: 0 0.85rem;
	border: 0 !important;
	border-radius: 999px;
	background: #1D73BE !important;
	background-color: #1D73BE !important;
	box-shadow: 0 2px 8px rgba(29, 115, 190, 0.35);
	cursor: pointer;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.02em;
	color: #fff !important;
	transition: background 0.15s ease, box-shadow 0.15s ease;
}

.oceaniclink-cat-gallery-outer .oceaniclink-cat-gallery__controls .oceaniclink-cat-gallery__btn:hover,
.oceaniclink-cat-gallery-outer .oceaniclink-cat-gallery__controls .oceaniclink-cat-gallery__btn:focus-visible,
.oceaniclink-cat-gallery-outer .oceaniclink-cat-gallery__controls .oceaniclink-cat-gallery__btn--prev:hover,
.oceaniclink-cat-gallery-outer .oceaniclink-cat-gallery__controls .oceaniclink-cat-gallery__btn--next:hover {
	background: #185fa0 !important;
	background-color: #185fa0 !important;
	border-color: #185fa0 !important;
	box-shadow: 0 3px 10px rgba(29, 115, 190, 0.45);
	color: #fff !important;
	outline: none;
}

/* One image: hide controls */
.oceaniclink-cat-gallery:has(.oceaniclink-cat-gallery__slide:only-child) .oceaniclink-cat-gallery__controls {
	display: none;
}