/*
 * "Udstyr til turen" – vandret, mobilvenlig række af Grej-produkter på
 * steder, ruter og artikler. Genbruger WooCommerces egen kort-markup
 * (billede, titel, pris, køb-knap); her indpakkes og stylet den blot i
 * temaets egne farver, uden at ændre WooCommerces indre struktur.
 */

.gocamp-udstyr {
	margin: 2.5em 0;
	clear: both;
}

.gocamp-udstyr__titel {
	display: flex;
	align-items: center;
	gap: 0.4em;
	margin: 0 0 0.9em;
	font-family: var(--gc-font-overskrift, inherit);
	font-size: 1.3rem;
	line-height: 1.2;
	color: var(--gc-tekst, #26302a);
}

.gocamp-udstyr__titel i {
	color: var(--gc-terracotta, #b8683f);
	font-size: 1.1em;
}

/* Vandret, aftrappet rulle – ikke WooCommerces faste grid. */
.gocamp-udstyr__rad {
	position: relative;
}

.gocamp-udstyr__rad ul.products {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 1rem;
	margin: 0 !important;
	padding: 0.15rem 0.15rem 1rem !important;
	list-style: none !important;
	overflow-x: auto;
	overflow-y: visible;
	scroll-snap-type: x proximate;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.gocamp-udstyr__rad ul.products::-webkit-scrollbar {
	height: 6px;
}

.gocamp-udstyr__rad ul.products::-webkit-scrollbar-thumb {
	background: var(--gc-kant, #e2dacb);
	border-radius: 4px;
}

.gocamp-udstyr__rad ul.products li.product {
	flex: 0 0 200px;
	width: 200px !important;
	scroll-snap-align: start;
	margin: 0 !important;
	padding: 1rem;
	background: var(--gc-hvid, #fffdf9);
	border: 1px solid var(--gc-kant, #e2dacb);
	border-radius: var(--gc-radius-lille, 10px);
	box-shadow: var(--gc-skygge, 0 1px 2px rgba(38, 48, 42, 0.06));
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.gocamp-udstyr__rad ul.products li.product:hover,
.gocamp-udstyr__rad ul.products li.product:focus-within {
	box-shadow: var(--gc-skygge-loeft, 0 8px 20px rgba(38, 48, 42, 0.12));
	transform: translateY(-2px);
}

.gocamp-udstyr__rad ul.products li.product img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: calc(var(--gc-radius-lille, 10px) - 4px);
	margin-bottom: 0.6rem;
	background: var(--gc-creme, #f7f3ec);
}

.gocamp-udstyr__rad ul.products li.product .woocommerce-loop-product__title,
.gocamp-udstyr__rad ul.products li.product h2,
.gocamp-udstyr__rad ul.products li.product h3 {
	margin: 0 0 0.3rem;
	font-family: var(--gc-font-tekst, inherit);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--gc-tekst, #26302a);
}

.gocamp-udstyr__rad ul.products li.product .price {
	display: block;
	margin: 0 0 0.6rem;
	font-family: var(--gc-font-tekst, inherit);
	font-size: 0.95rem;
	color: var(--gc-tekst-bloed, #4a554d);
}

.gocamp-udstyr__rad ul.products li.product .price del {
	opacity: 0.6;
	text-decoration: line-through;
}

.gocamp-udstyr__rad ul.products li.product .price ins {
	text-decoration: none;
	color: var(--gc-terracotta, #b8683f);
	font-weight: 600;
}

.gocamp-udstyr__rad ul.products li.product .onsale {
	background: var(--gc-okker, #c9973f);
	color: var(--gc-hvid, #fffdf9);
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 0.15em 0.5em;
	border-radius: 999px;
	min-height: 0;
	line-height: 1.6;
}

.gocamp-udstyr__rad ul.products li.product .star-rating {
	margin-bottom: 0.3rem;
	font-size: 0.85rem;
}

.gocamp-udstyr__rad ul.products li.product .button {
	display: inline-block;
	width: 100%;
	text-align: center;
	padding: 0.55em 0.8em;
	font-size: 0.85rem;
	background-color: var(--gc-skov, #2f4a3a);
	color: var(--gc-hvid, #fffdf9);
	border: none;
}

.gocamp-udstyr__rad ul.products li.product .button:hover,
.gocamp-udstyr__rad ul.products li.product .button:focus {
	background-color: var(--gc-skov-moerk, #1f3329);
	color: var(--gc-hvid, #fffdf9);
}

.gocamp-udstyr__rad ul.products li.product .button:focus-visible,
.gocamp-udstyr__titel:focus-visible {
	outline: 2px solid var(--gc-terracotta, #b8683f);
	outline-offset: 2px;
}

.gocamp-udstyr__rad ul.products li.product .added_to_cart {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.8rem;
	text-align: center;
	color: var(--gc-skov, #2f4a3a);
}

.gocamp-udstyr__mere {
	margin: 0.9rem 0 0;
	font-size: 0.95rem;
}

.gocamp-udstyr__mere a {
	color: var(--gc-skov, #2f4a3a);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--gc-salvie, #a9b8a0);
	text-underline-offset: 3px;
}

.gocamp-udstyr__mere a:hover,
.gocamp-udstyr__mere a:focus {
	color: var(--gc-terracotta, #b8683f);
}

/* Fra tablet og op: lidt bredere kort, mere luft. */
@media (min-width: 700px) {
	.gocamp-udstyr__rad ul.products li.product {
		flex: 0 0 220px;
		width: 220px !important;
	}
}

/* Reducer bevægelse for dem, der har bedt om det. */
@media (prefers-reduced-motion: reduce) {
	.gocamp-udstyr__rad ul.products li.product,
	.gocamp-udstyr__rad ul.products li.product .button {
		transition: none;
	}
}