/* dragon/products — kafle produktów (propozycja 1: .featured-section). */

.drg-products {
	padding: 38px 0 80px;
	--drg-accent: #647746;
}

/* Siatka `--drg-cols` kolumn; karuzela (z OGROOD) włącza się klasami z drg_carousel(). */
.drg-products .drg-products__grid {
	--drg-prod-gap: 13px;
	display: grid;
	grid-template-columns: repeat(var(--drg-cols, 4), minmax(0, 1fr));
	gap: var(--drg-prod-gap);
	list-style: none;
	margin: 0;
	padding: 4px 0 0;
}

.drg-products .drg-products__grid.is-carousel {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 10px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--drg-line) transparent;
}

.drg-products .drg-products__grid.is-carousel > .drg-product {
	flex: 0 0 calc((100% - (var(--drg-cols, 4) - 1) * var(--drg-prod-gap)) / var(--drg-cols, 4));
	scroll-snap-align: start;
}

.drg-products .drg-carousel-nav {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin: -14px 0 14px;
}

.drg-products .drg-carousel-nav.is-mobile-only {
	display: none;
}

.drg-products .drg-carousel-nav__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--global-palette-btn-bg, var(--drg-green));
	border-radius: 50%;
	background: color-mix(in srgb, var(--global-palette-btn-sec-bg, #0d100d) 80%, transparent);
	color: var(--global-palette-btn-sec, var(--drg-text));
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	box-shadow: none;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.drg-products .drg-carousel-nav__btn:hover,
.drg-products .drg-carousel-nav__btn:focus-visible {
	background: var(--global-palette-btn-bg-hover, var(--drg-acid));
	color: var(--global-palette-btn-hover, #0a0d07);
	border-color: var(--global-palette-btn-bg-hover, var(--drg-acid));
}

.drg-products .drg-carousel-nav__btn[aria-disabled="true"] {
	opacity: 0.45;
}

@media (prefers-reduced-motion: reduce) {
	.drg-products .drg-products__grid.is-carousel {
		scroll-behavior: auto;
	}
}

/* ---------------------------------------------------------------- ulubione (z OGROOD) */
.drg-products .drg-wishlist {
	position: absolute;
	z-index: 3;
	top: 10px;
	right: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid #384032;
	border-radius: 50%;
	background: #0a0d0acc;
	color: var(--drg-text-2);
	cursor: pointer;
	box-shadow: none;
	transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.drg-products .drg-wishlist:hover,
.drg-products .drg-wishlist:focus-visible {
	color: var(--drg-green);
	border-color: var(--drg-green);
	background: #0a0d0a;
}

.drg-products .drg-wishlist[aria-pressed="true"] {
	color: var(--drg-green);
	border-color: var(--drg-green);
}

.drg-products .drg-wishlist[aria-pressed="true"] svg {
	fill: currentColor;
}

/* ---------------------------------------------------------------- ocena (z OGROOD) */
.drg-products .drg-rating {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 2px 0 4px;
}

.drg-products .drg-rating__stars {
	display: inline-flex;
	gap: 1px;
	color: var(--global-palette15, #f5a524);
}

.drg-products .drg-star svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
}

.drg-products .drg-star.is-full svg {
	fill: currentColor;
}

.drg-products .drg-star.is-half svg {
	fill: color-mix(in srgb, currentColor 45%, transparent);
}

.drg-products .drg-star.is-empty {
	color: #4a5245;
}

.drg-products .drg-rating__count {
	font-size: 8px;
	color: var(--drg-muted);
}

.drg-products .drg-product {
	border: 1px solid #2a3028;
	background: #0e110e;
	min-width: 0;
	transition: transform 0.2s, border 0.2s;
	scroll-snap-align: start;
	margin: 0;
}

.drg-products .drg-product:hover {
	transform: translateY(-4px);
	border-color: #647746;
}

.drg-products .drg-product__image {
	height: 225px;
	position: relative;
	overflow: hidden;
	background: #10130f;
	display: grid;
	place-items: center;
}

.drg-products .drg-product__image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, #080a08aa, transparent 35%), linear-gradient(115deg, #ffffff08, transparent 45%);
	pointer-events: none;
}

.drg-products .drg-product__image img {
	width: 90%;
	height: 90%;
	object-fit: cover;
	object-position: center 48%;
	filter: drop-shadow(0 14px 12px #000c);
	transition: transform 0.3s;
}

.drg-products .drg-product:hover .drg-product__image img {
	transform: scale(1.05);
}

.drg-products .drg-product--red .drg-product__image {
	background: radial-gradient(ellipse at 50% 65%, #46180f, #0e100d 73%);
}

.drg-products .drg-product--green .drg-product__image {
	background: radial-gradient(ellipse at 50% 65%, #172d0b, #0e100d 73%);
}

.drg-products .drg-product--ember .drg-product__image {
	background: radial-gradient(ellipse at 50% 65%, #511b0d, #0e100d 73%);
}

.drg-products .drg-product--magic .drg-product__image {
	background: radial-gradient(ellipse at 50% 65%, #271443, #0e100d 73%);
}

.drg-products .drg-product__label {
	position: absolute;
	z-index: 2;
	top: 12px;
	left: 12px;
	padding: 6px 8px;
	background: var(--drg-red);
	font-size: 8px;
	font-weight: 800;
	letter-spacing: 1px;
	color: #fff;
	line-height: 1;
}

.drg-products .drg-product--green .drg-product__label {
	background: var(--drg-green);
	color: #13190d;
}

.drg-products .drg-product--ember .drg-product__label {
	background: var(--drg-ember);
}

.drg-products .drg-product--magic .drg-product__label {
	background: var(--drg-magic);
}

.drg-products .drg-product__index {
	position: absolute;
	z-index: 2;
	right: 11px;
	bottom: 9px;
	font-size: 8px;
	letter-spacing: 1.5px;
	color: #a4ab9e;
}

.drg-products .drg-product__details {
	padding: 16px 14px 13px;
}

.drg-products .drg-product__type {
	font-size: 8px;
	letter-spacing: 1.2px;
	color: #a2a99c;
	margin: 0;
}

.drg-products .drg-product__type span {
	color: var(--drg-green);
	margin: 0 5px;
}

.drg-products .drg-product__name {
	font-family: var(--drg-display);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.1;
	letter-spacing: 0.5px;
	margin: 6px 0 3px;
	color: var(--drg-text);
	text-transform: uppercase;
}

.drg-products .drg-product__description {
	height: 29px;
	font-size: 9px;
	line-height: 1.5;
	color: #969d91;
	margin: 0;
	overflow: hidden;
}

.drg-products .drg-product__specs {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 11px 0;
	border-top: 1px solid #252b23;
	margin-top: 12px;
	min-height: 51px;
}

.drg-products .drg-product__specs > span {
	font-family: var(--drg-display);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.1;
	color: #e9eee4;
}

.drg-products .drg-product__specs small {
	font-family: var(--drg-body);
	display: block;
	font-size: 7px;
	font-weight: 700;
	color: #899184;
	letter-spacing: 0.6px;
}

.drg-products .drg-product__more {
	margin-left: auto;
	width: 23px;
	height: 23px;
	border: 1px solid #424a3c;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: var(--drg-green) !important;
}

.drg-products .drg-product__buy {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.drg-products .drg-product__price {
	font-size: 11px;
	font-weight: 700;
	color: var(--drg-text);
}

.drg-products .drg-product__stock {
	display: block;
	font-size: 8px;
	font-weight: 400;
	color: #899184;
}

.drg-products .drg-product__add {
	height: 31px;
	padding: 0 10px;
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--drg-green);
	color: #10150a !important;
	font-size: 8px;
	font-weight: 900;
	letter-spacing: 0.5px;
	white-space: nowrap;
	text-transform: uppercase;
}

.drg-products .drg-product__add:hover {
	background: #c9ff69;
}

.drg-products .drg-product__add span {
	font-size: 14px;
}

.drg-products .drg-products__disclaimer {
	margin: 12px 0 0;
	color: #737b70;
	font-size: 8px;
}

@media (max-width: 1050px) {
	/* Tablet: najwyżej trzy kolumny. */
	.drg-products .drg-products__grid:not(.is-carousel) {
		grid-template-columns: repeat(min(var(--drg-cols, 4), 3), minmax(0, 1fr));
	}

	.drg-products .drg-products__grid.is-carousel > .drg-product {
		flex-basis: calc((100% - 2 * var(--drg-prod-gap)) / 3);
	}

	.drg-products .drg-product__image {
		height: 190px;
	}

	.drg-products .drg-product__details {
		padding: 13px 11px;
	}

	.drg-products .drg-product__name {
		font-size: 21px;
	}

	.drg-products .drg-product__specs {
		gap: 7px;
	}

	.drg-products .drg-product__add {
		font-size: 7px;
		padding: 0 7px;
	}
}

@media (max-width: 760px) {
	.drg-products {
		padding: 6px 0 54px;
	}

	.drg-products .drg-products__grid,
	.drg-products .drg-products__grid:not(.is-carousel) {
		--drg-prod-gap: 9px;
		grid-template-columns: 1fr 1fr;
	}

	/* Telefon: przewijanie w poziomie (OGROOD: 62% szerokości na kafel produktu). */
	.drg-products .drg-products__grid.is-carousel,
	.drg-products .drg-products__grid.is-carousel-mobile {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		margin-inline: -18px;
		padding: 4px 18px 8px;
		scroll-padding-inline: 18px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.drg-products .drg-products__grid.is-carousel > .drg-product,
	.drg-products .drg-products__grid.is-carousel-mobile > .drg-product {
		flex: 0 0 62%;
		scroll-snap-align: start;
	}

	.drg-products .drg-carousel-nav.is-mobile-only {
		display: flex;
	}

	.drg-products .drg-carousel-nav {
		margin: -8px 0 12px;
	}

	.drg-products .drg-product__image {
		height: 155px;
	}

	.drg-products .drg-product__image img {
		width: 100%;
		height: 92%;
	}

	.drg-products .drg-product__label {
		font-size: 6px;
		top: 8px;
		left: 7px;
		padding: 5px;
	}

	.drg-products .drg-product__details {
		padding: 11px 9px;
	}

	.drg-products .drg-product__type {
		font-size: 6px;
		letter-spacing: 0.6px;
	}

	.drg-products .drg-product__name {
		font-size: 18px;
		margin-top: 5px;
	}

	.drg-products .drg-product__description {
		font-size: 8px;
		height: 34px;
	}

	.drg-products .drg-product__specs {
		padding: 8px 0;
		margin-top: 8px;
		gap: 7px;
	}

	.drg-products .drg-product__specs > span {
		font-size: 12px;
	}

	.drg-products .drg-product__specs small {
		font-size: 6px;
	}

	.drg-products .drg-product__more {
		width: 20px;
		height: 20px;
		font-size: 11px;
	}

	.drg-products .drg-product__buy {
		align-items: stretch;
		flex-direction: column;
		gap: 8px;
	}

	.drg-products .drg-product__price {
		font-size: 9px;
	}

	.drg-products .drg-product__add {
		justify-content: center;
		height: 29px;
		font-size: 7px;
	}

	.drg-products .drg-products__disclaimer {
		font-size: 7px;
		line-height: 1.5;
	}
}

@media (max-width: 380px) {
	.drg-products .drg-product__name {
		font-size: 16px;
	}
}