/* ---------------------------------------------------------------------------
   Ace Glove — Section: Product detail (overview)
   Left: edge-to-edge image slider with a numbered pager. Right: copy.
--------------------------------------------------------------------------- */

.ags-pd {
	position: relative;
	overflow: hidden;
	background:
		linear-gradient(rgba(255, 255, 255, var(--ags-pd-wash, 0.12)), rgba(255, 255, 255, var(--ags-pd-wash, 0.12))),
		var(--ags-white) var(--ags-pd-bg, none) center / cover no-repeat;
}

/* Dot pattern, bottom-right corner (same motif as the mockup). */
.ags-pd::after {
	content: "";
	position: absolute;
	right: var(--ags-pad-x);
	bottom: 24px;
	width: 180px;
	height: 110px;
	background: radial-gradient(var(--ags-primary) 1.6px, transparent 2px) 0 0 / 18px 18px;
	opacity: 0.28;
	pointer-events: none;
}

.ags-pd__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 64px;
	align-items: stretch;
	max-width: var(--ags-max);
	margin: 0 auto;
	padding: var(--ags-pad-y) var(--ags-pad-x);
}

/* --- Media: the image fills the whole column, no inner padding ------------- */

.ags-pd__media {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

/* The image fills the whole frame; the frame stretches to the copy's height. */
.ags-pd__frame {
	position: relative;
	flex: 1 1 auto;
	min-height: 360px;
	overflow: hidden;
	border-radius: var(--ags-about-radius);
	background: var(--ags-primary-tint);
	box-shadow: 0 24px 50px -28px rgba(19, 31, 40, 0.4);
}

.ags-pd__slide {
	position: absolute;
	inset: 0;
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.5s var(--ags-ease);
}

/* Whole image shown (default): a blurred copy of the same photo fills any spare space. */
.ags-pd__slide::before {
	content: "";
	position: absolute;
	inset: -24px;
	background: var(--ags-pd-img) center / cover no-repeat;
	filter: blur(22px) saturate(1.1);
	opacity: 0.85;
}

.ags-pd__slide img {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ags-pd--cover .ags-pd__slide::before { display: none; }
.ags-pd--cover .ags-pd__slide img { object-fit: cover; }

.ags-pd__slide.is-active { opacity: 1; }

.ags-pd__badge {
	position: absolute;
	left: 16px;
	top: 16px;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--ags-secondary);
	color: var(--ags-white);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Thumbnails: one per slide, sized like a row of five, left aligned. */
.ags-pd__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ags-pd__page {
	flex: 0 0 calc((100% - 32px) / 5);
	aspect-ratio: 1.3;
	padding: 0;
	overflow: hidden;
	border: 1px solid rgba(19, 31, 40, 0.12);
	border-radius: 8px;
	background: var(--ags-primary-tint);
	cursor: pointer;
	transition: border-color var(--ags-speed) var(--ags-ease), box-shadow var(--ags-speed) var(--ags-ease);
}

.ags-pd__page img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ags-pd__page:hover,
.ags-pd__page.is-active {
	border-color: var(--ags-primary);
	box-shadow: 0 0 0 1px var(--ags-primary);
}

.ags-pd__page:focus-visible { outline: 2px solid var(--ags-primary); outline-offset: 2px; }

/* --- Copy ------------------------------------------------------------------- */

.ags-pd__content {
	align-self: center;
	min-width: 0;
}

.ags-pd .ags-pd__eyebrow {
	margin: 0 0 12px;
	font-size: var(--ags-eyebrow-size);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ags-primary);
}

.ags-pd .ags-pd__title {
	margin: 0;
	color: var(--ags-secondary);
}

.ags-pd .ags-pd__text {
	margin: 22px 0 26px;
	font-size: var(--ags-text-size);
	line-height: 1.65;
	color: var(--ags-secondary);
}

.ags-pd__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

.ags-pd__chips li {
	margin: 0;
	padding: 8px 16px;
	border: 1px solid rgba(19, 31, 40, 0.2);
	border-radius: 999px;
	background: var(--ags-white);
	color: var(--ags-secondary);
	font-size: 13px;
	font-weight: 600;
}

.ags-pd__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.ags-pd__actions .ags-btn__label { text-transform: uppercase; }


/* --- Breakpoints ------------------------------------------------------------ */

@media (max-width: 1024px) {
	.ags-pd__inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
	.ags-pd__frame { min-height: 0; flex: none; aspect-ratio: 1.3; }
}

@media (max-width: 600px) {
	.ags-pd__frame { aspect-ratio: 1.1; }
	.ags-pd__actions .ags-btn { flex: 1 1 100%; justify-content: center; }
}

/* Transparent images (detected by the script): soft grey-lilac studio ground, no blurred fill. */
.ags-pd__slide.is-transparent { background: radial-gradient(circle at 50% 45%, #f3f2f6 0%, #e9e8ee 100%); }
.ags-pd__slide.is-transparent::before { display: none; }