/* GI-tag district map -- District-GI-SKU Mapping module.
 * All rules are scoped under .gi-map-section so nothing here can leak into the
 * rest of the storefront. Brand accent matches the site's #ee4b2b family. */

.gi-map-section {
	--gi-fill: #eae5d8;
	--gi-fill-has: #dcc196;
	--gi-hover: #f2c675;
	--gi-active: #ee4b2b;
	--gi-stroke: #b7ac93;
	--gi-text: #333333;
}

.gi-map-section .gi-map-intro {
	text-align: center;
	margin-bottom: 20px;
}

/* .trendingcollection (the site's own section heading) supplies size, weight
 * and colour. Only the bits it can't know about are set here -- it is a
 * flex/centred rule, so a long title needs explicit wrapping. */
.gi-map-section .gi-map-title {
	margin: 0 0 8px;
	text-align: center;
	/* .trendingcollection is display:flex and sets justify-content:center, but a
	 * later stylesheet resets it to normal, which left-aligns the text. This
	 * selector out-specifies both. flex-wrap lets a long title break. */
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.gi-map-section .gi-map-subtitle {
	font-size: 14px;
	line-height: 1.6;
	color: #666666;
	max-width: 720px;
	margin: 0 auto;
}

/*
 * Stacked and centred: map first, products beneath it.
 *
 * This was originally two columns, map left and panel right. That pinned the
 * map to the left half of the page while the right half stayed nearly empty
 * until a district was clicked, so the map read as "left aligned" rather than
 * as the focal point of the section.
 */
.gi-map-section .gi-map-layout {
	display: block;
}

.gi-map-section .gi-map-col {
	/* Bihar is ~0.72 as tall as it is wide, so this caps the map at roughly
	 * 490px high -- large enough to hit a small district, short enough that the
	 * products below stay reachable without a long scroll. */
	max-width: 680px;
	margin: 0 auto;
}

.gi-map-section .gi-panel-col {
	margin-top: 26px;
}

/* ---------------------------------------------------------------- the map */

.gi-district-map-svg {
	width: 100%;
	height: auto;
	display: block;
	overflow: visible;
}

.gi-district {
	fill: var(--gi-fill);
	stroke: var(--gi-stroke);
	stroke-width: 0.7px;
	stroke-linejoin: round;
	cursor: pointer;
	transition: fill 0.15s ease;
	outline: none;
}

/* Districts that actually have GI products are tinted, so the map reads as
 * data rather than decoration. */
.gi-district.has-products {
	fill: var(--gi-fill-has);
}

.gi-district:hover {
	fill: var(--gi-hover);
}

.gi-district:focus-visible {
	stroke: #222222;
	stroke-width: 2px;
}

.gi-district.active {
	fill: var(--gi-active);
	stroke: #ffffff;
	stroke-width: 1.5px;
}

/* Centred to match the centred map above them. */
.gi-map-message,
.gi-loading,
.gi-error,
.gi-empty {
	padding: 18px 4px;
	color: #666666;
	font-size: 14px;
	text-align: center;
}

.gi-error {
	color: #c0392b;
}

/* -------------------------------------------------------------- the panel */

.gi-panel-heading {
	font-size: 18px;
	font-weight: 600;
	color: var(--gi-text);
	padding-bottom: 8px;
	border-bottom: 2px solid var(--gi-active);
	/* display:table shrink-wraps to the text (so the underline only spans the
	 * district name) while still being block-level, so margin auto centres it
	 * under the now-centred map. */
	display: table;
	margin: 0 auto 14px;
}

/*
 * auto-FIT with a bounded track (not auto-fill with 1fr) plus centring: empty
 * tracks collapse and the leftover space is split either side, so a district
 * with two products shows two centred cards rather than two cards hugging the
 * left edge of a 1200px row. The bounded max stops those two cards inflating
 * to half the page each.
 */
.gi-sku-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 190px));
	justify-content: center;
	gap: 14px;
	margin-top: 4px;
}

.gi-sku-card {
	display: block;
	text-decoration: none;
	color: inherit;
	border: 1px solid #eeeeee;
	border-radius: 8px;
	padding: 8px;
	background: #ffffff;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.gi-sku-card:hover,
.gi-sku-card:focus {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
	transform: translateY(-2px);
	text-decoration: none;
	color: inherit;
}

.gi-sku-imgwrap {
	width: 100%;
	padding-top: 100%; /* square box, no layout shift while the image loads */
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	background: #f7f7f7;
}

.gi-sku-imgwrap img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gi-sku-name {
	font-size: 13px;
	line-height: 1.35;
	margin-top: 8px;
	color: var(--gi-text);
	/* Two lines max, so cards in a row stay the same height */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.gi-sku-price {
	font-size: 14px;
	font-weight: 600;
	color: var(--gi-active);
	margin-top: 4px;
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 767px) {
	.gi-map-section .gi-panel-col {
		margin-top: 18px;
	}
	/* On a phone the cards should use the full width, so 1fr rather than the
	 * bounded desktop track. auto-fill keeps a lone card at card size. */
	.gi-sku-grid {
		grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
		justify-content: stretch;
		gap: 10px;
	}
	.gi-panel-heading {
		font-size: 16px;
	}
	/* .trendingcollection is 36px/38px, which is too heavy for a phone and is
	 * what the site's own mobile rules already shrink elsewhere. */
	.gi-map-section .gi-map-title {
		font-size: 20px !important;
		line-height: 26px !important;
	}
	.gi-map-section .gi-map-subtitle {
		font-size: 13px;
	}
	/* Touch targets: a thicker stroke makes small districts easier to hit. */
	.gi-district {
		stroke-width: 1px;
	}
}