/* =========================================================
   GPN — SHOP PRODUCTS SLIDER
========================================================= */

.gpn-shop-slider {
	position: relative;

	padding: 120px 0 130px;

	background: #f5f3eb;

	overflow: hidden;
}


.gpn-shop-slider__container {
	width: min(1380px, calc(100% - 80px));

	margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.gpn-shop-slider__header {
	display: flex;

	align-items: flex-end;
	justify-content: space-between;

	gap: 60px;

	margin-bottom: 55px;
}


.gpn-shop-slider__heading {
	max-width: 700px;
}


.gpn-shop-slider__eyebrow {
	display: block;

	margin-bottom: 18px;

	color: #a27b35;

	font-family: Arial, sans-serif;

	font-size: 9px;

	font-weight: 700;

	letter-spacing: 2.8px;

	text-transform: uppercase;
}


.gpn-shop-slider__title {
	margin: 0;

	color: #173d27;

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size: clamp(48px, 5.5vw, 76px);

	font-weight: 400;

	line-height: .94;

	letter-spacing: -3px;
}


.gpn-shop-slider__title em {
	color: #71865d;

	font-style: italic;
}


.gpn-shop-slider__intro {
	max-width: 330px;

	padding-bottom: 5px;
}


.gpn-shop-slider__intro p {
	margin: 0 0 23px;

	color: #667067;

	font-family: Arial, sans-serif;

	font-size: 12px;

	line-height: 1.8;
}


.gpn-shop-slider__all-link {
	display: inline-flex;

	align-items: center;

	gap: 14px;

	padding-bottom: 8px;

	border-bottom: 1px solid #173d27;

	color: #173d27;

	font-family: Arial, sans-serif;

	font-size: 9px;

	font-weight: 700;

	letter-spacing: 1.5px;

	text-decoration: none;

	text-transform: uppercase;

	transition: gap .3s ease;
}


.gpn-shop-slider__all-link:hover {
	gap: 22px;
}


/* =========================================================
   VIEWPORT
========================================================= */

.gpn-shop-slider__viewport {
	width: 100%;

	overflow: hidden;
}


.gpn-shop-slider__track {
	display: flex;

	width: 100%;

	transition:
		transform .75s cubic-bezier(.22,.61,.36,1);
}


.gpn-shop-slider__slide {
	flex: 0 0 100%;

	width: 100%;
}


/* =========================================================
   6 PRODUCTS
   3 COLUMNS × 2 ROWS
========================================================= */

.gpn-shop-slider__grid {
	display: grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	grid-template-rows:
		repeat(2, auto);

	gap: 45px 28px;
}


/* =========================================================
   PRODUCT CARD
========================================================= */

.gpn-shop-card {
	min-width: 0;
}


.gpn-shop-card__image {
	position: relative;

	aspect-ratio: 1 / 1.12;

	background: #e8e7dd;

	overflow: hidden;
}


.gpn-shop-card__image-link {
	position: absolute;

	inset: 0;

	display: block;
}


.gpn-shop-card__image-main,
.gpn-shop-card__image-hover {
	position: absolute;

	inset: 0;

	width: 100% !important;
	height: 100% !important;

	object-fit: cover;

	transition:
		opacity .55s ease,
		transform .8s cubic-bezier(.2,.65,.2,1);
}


.gpn-shop-card__image-main {
	z-index: 1;
}


.gpn-shop-card__image-hover {
	z-index: 2;

	opacity: 0;
}


.gpn-shop-card:hover
.gpn-shop-card__image-hover {
	opacity: 1;
}


.gpn-shop-card:hover
.gpn-shop-card__image-main {
	transform: scale(1.045);
}


/* =========================================================
   PLACEHOLDER
========================================================= */

.gpn-shop-card__placeholder {
	position: absolute;

	inset: 0;

	display: flex;

	align-items: center;
	justify-content: center;

	background: #e8e9df;
}


.gpn-shop-card__placeholder span {
	color: #71816c;

	font-family: Georgia, serif;

	font-size: 22px;

	letter-spacing: 4px;
}


/* =========================================================
   BADGE
========================================================= */

.gpn-shop-card__badge {
	position: absolute;

	top: 14px;
	left: 14px;

	z-index: 5;

	padding: 8px 10px;

	background: #d9b55b;

	color: #173d27;

	font-family: Arial, sans-serif;

	font-size: 7px;

	font-weight: 800;

	letter-spacing: 1px;

	text-transform: uppercase;
}


/* =========================================================
   QUICK VIEW
========================================================= */

.gpn-shop-card__quick {
	position: absolute;

	right: 14px;
	bottom: 14px;
	left: 14px;

	z-index: 5;

	display: flex;

	align-items: center;
	justify-content: space-between;

	padding: 13px 15px;

	background: rgba(253,252,248,.95);

	color: #173d27;

	font-family: Arial, sans-serif;

	font-size: 8px;

	font-weight: 700;

	letter-spacing: 1.3px;

	text-decoration: none;

	text-transform: uppercase;

	opacity: 0;

	transform: translateY(10px);

	transition:
		opacity .3s ease,
		transform .3s ease;
}


.gpn-shop-card:hover
.gpn-shop-card__quick {
	opacity: 1;

	transform: translateY(0);
}


/* =========================================================
   CONTENT
========================================================= */

.gpn-shop-card__content {
	padding: 15px 2px 0;
}


.gpn-shop-card__category {
	margin-bottom: 7px;

	overflow: hidden;

	color: #a27b35;

	font-family: Arial, sans-serif;

	font-size: 7px;

	font-weight: 700;

	letter-spacing: 1.5px;

	text-transform: uppercase;

	white-space: nowrap;

	text-overflow: ellipsis;
}


.gpn-shop-card__category a {
	color: inherit;

	text-decoration: none;
}


.gpn-shop-card__name {
	margin: 0;

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size: 20px;

	font-weight: 400;

	line-height: 1.2;
}


.gpn-shop-card__name a {
	color: #173d27;

	text-decoration: none;

	transition: color .25s ease;
}


.gpn-shop-card__name a:hover {
	color: #a27b35;
}


.gpn-shop-card__bottom {
	display: flex;

	align-items: center;
	justify-content: space-between;

	margin-top: 9px;
}


.gpn-shop-card__price {
	color: #173d27;

	font-family: Arial, sans-serif;

	font-size: 12px;

	font-weight: 700;
}


.gpn-shop-card__price del {
	margin-right: 5px;

	color: #9da39c;

	font-weight: 400;
}


.gpn-shop-card__price ins {
	text-decoration: none;
}


.gpn-shop-card__arrow {
	display: flex;

	align-items: center;
	justify-content: center;

	width: 31px;
	height: 31px;

	border: 1px solid rgba(23,61,39,.2);

	border-radius: 50%;

	color: #173d27;

	font-size: 14px;

	text-decoration: none;

	transition:
		background .3s ease,
		color .3s ease;
}


.gpn-shop-card__arrow:hover {
	background: #173d27;

	color: #fff;
}


/* =========================================================
   NAVIGATION
========================================================= */

.gpn-shop-slider__navigation {
	display: flex;

	align-items: center;
	justify-content: center;

	gap: 28px;

	margin-top: 55px;
}


.gpn-shop-slider__arrow {
	display: flex;

	align-items: center;
	justify-content: center;

	width: 45px;
	height: 45px;

	padding: 0;

	border: 1px solid rgba(23,61,39,.25);

	border-radius: 50%;

	background: transparent;

	color: #173d27;

	font-size: 17px;

	cursor: pointer;

	transition:
		background .3s ease,
		color .3s ease,
		transform .3s ease;
}


.gpn-shop-slider__arrow:hover:not(:disabled) {
	background: #173d27;

	color: #fff;

	transform: translateY(-2px);
}


.gpn-shop-slider__arrow:disabled {
	cursor: default;

	opacity: .3;
}


.gpn-shop-slider__pagination {
	display: flex;

	align-items: center;

	gap: 9px;

	color: #173d27;

	font-family: Arial, sans-serif;

	font-size: 9px;

	font-weight: 700;

	letter-spacing: 1px;
}


.gpn-shop-slider__current {
	color: #a27b35;
}


.gpn-shop-slider__line {
	width: 42px;

	height: 1px;

	background: rgba(23,61,39,.25);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

	.gpn-shop-slider__container {
		width: calc(100% - 45px);
	}


	.gpn-shop-slider__header {
		align-items: flex-start;

		flex-direction: column;

		gap: 25px;
	}


	.gpn-shop-slider__intro {
		max-width: 500px;
	}


	.gpn-shop-slider__grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		grid-template-rows:
			repeat(3, auto);

		gap: 35px 18px;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

	.gpn-shop-slider {
		padding: 85px 0 90px;
	}


	.gpn-shop-slider__container {
		width: calc(100% - 30px);
	}


	.gpn-shop-slider__title {
		font-size: 47px;

		letter-spacing: -2px;
	}


	.gpn-shop-slider__grid {
		grid-template-columns: 1fr 1fr;

		grid-template-rows:
			repeat(3, auto);

		gap: 30px 12px;
	}


	.gpn-shop-card__image {
		aspect-ratio: .78;
	}


	.gpn-shop-card__quick {
		display: none;
	}


	.gpn-shop-card__name {
		font-size: 16px;
	}


	.gpn-shop-card__price {
		font-size: 10px;
	}


	.gpn-shop-card__arrow {
		width: 27px;
		height: 27px;

		font-size: 12px;
	}

}