/* Game Downtown Product Box public styles. */

.gdpb-product-box {
	--gdpb-border: #dedede;
	--gdpb-surface: #ffffff;
	--gdpb-text: #333333;
	--gdpb-muted: #6b7280;

	--gdpb-amazon: #3a3a3a;
	--gdpb-rakuten: #7a2e2e;
	--gdpb-yahoo: #7a1f2b;
	--gdpb-geo: #e79c18;
	--gdpb-animate: #2f5aa8;
	--gdpb-other: #287C54;

	display: flex;
	align-items: flex-start;
	gap: 1rem;

	max-width: 760px;
	margin: 1.5rem auto;
	padding: .75rem 0;

	color: var(--gdpb-text);
	background: var(--gdpb-surface);
	border: 1px solid var(--gdpb-border);
	border-radius: 6px;
	box-shadow: none;

	box-sizing: border-box;
}

.gdpb-product-box *,
.gdpb-product-box *::before,
.gdpb-product-box *::after {
	box-sizing: border-box;
}


/* =========================
	Image
========================= */

.gdpb-product-box__image-wrap {
	flex: 0 0 26%;
	width: 26%;
	margin: 2%;
}

.gdpb-product-box__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
	border-radius: 4px;
}


/* =========================
	Content
========================= */

.gdpb-product-box__content {
	flex: 1;
	width: 100%;
	padding: 0 3%;
}


.gdpb-product-box__title {
	margin: .75rem 0 .5rem;
	color: var(--gdpb-text);
	font-size: 1em;
	line-height: 1.5;
	font-weight: 600;
}

.gdpb-product-box__title a:visited {
	color: var(--gdpb-text) !important;
}

.gdpb-meta {
	margin: 0;
	color: var(--gdpb-muted);
}


.gdpb-meta__item {
	display: flex;
	gap: .5rem;

	padding: .2rem 0;

	border: none;

	font-size: .8em;
}


.gdpb-meta__label {
	flex: 0 0 auto;
	font-weight: 700;
}


.gdpb-meta__value {
	margin: 0;
}


/* =========================
	Buttons
========================= */

.gdpb-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .8rem .4rem;

	padding: .5rem 0 0;
}


.gdpb-button {

	display: block;
	width: 90%;
	max-width: 420px;

	min-height: 44px;

	padding: 0;

	color: var(--gdpb-text) !important;

	background: #fff;

	border: 1px solid var(--gdpb-border);
	border-radius: 4px;

	font-size: 1.1em;
	font-weight: 600;

	line-height: 44px;
	text-align: center;

	text-decoration: none !important;

	transition:
		background .2s ease,
		border .2s ease,
		transform .2s ease;
}


/* Hover */

.gdpb-button:hover {

	color: var(--gdpb-text) !important;

	background: #f7f7f7;

	border-color: #999;

	transform: translateY(-1px);
}


/* Brand Accent */

.gdpb-button--amazon {
	border-left: 6px solid var(--gdpb-amazon);
}

.gdpb-button--rakuten {
	border-left: 6px solid var(--gdpb-rakuten);
}

.gdpb-button--yahoo {
	border-left: 6px solid var(--gdpb-yahoo);
}

.gdpb-button--geo {
	border-left: 6px solid var(--gdpb-geo);
}

.gdpb-button--animate {
	border-left: 6px solid var(--gdpb-animate);
}

.gdpb-button--other {
	border-left: 6px solid var(--gdpb-other);
}


/* =========================
	Badge
========================= */

.gdpb-badge {
	display: inline-flex;
	align-items: center;
	gap: .35rem;

	margin: .75rem auto .35rem;
	padding: .25rem .8rem;

	background: #fff7d6;

	border: 1px solid #f3d26a;
	border-radius: 999px;

	color: #8a5a00;

	font-size: .8em;
	font-weight: 700;
	line-height: 1.4;
}


/* =========================
	Tablet
========================= */

@media (min-width: 600px) and (max-width: 767px) {

	.gdpb-product-box {

		gap: .75rem;

		padding: .75rem;

	}

	.gdpb-product-box__image-wrap {

		flex: 0 0 24%;
		width: 24%;

		margin: 0;

	}

	.gdpb-product-box__content {

		padding: 0 .75rem;

	}

	.gdpb-product-box__title {

		font-size: .95em;

	}

	.gdpb-meta__item {

		font-size: .78em;

	}

	.gdpb-button {

		width: 100%;

		font-size: .95em;

	}

}


/* =========================
	Mobile
========================= */

@media (max-width: 599px) {

	.gdpb-product-box {

		display: block;

		padding: 1rem;

	}


	.gdpb-product-box__image-wrap {

		width: 45%;
		max-width: 180px;

		margin: 0 auto 1rem;

	}


	.gdpb-product-box__content {

		width: 90%;

		margin: auto;

		padding: 0;

		text-align: center;

	}


	.gdpb-product-box__title {

		font-size: .95em;

		text-align: center;

	}


	.gdpb-buttons {

		width: 100%;

		padding: .75rem 0;

	}


	.gdpb-button {

		width: 100%;

	}

}


@media (prefers-reduced-motion: reduce) {

	.gdpb-button {
		transition: none;
	}

}