/* =========================================================================
   CHOMP — Stockists: "Find in store" logo wall + store locator
   Logos render in their real brand colours (transparent PNG). Without a logo
   file the stockist falls back to a wordmark lockup.
   ========================================================================= */

.find-in-store { --stockist-mint: var(--chomp-primary-600); background: var(--chomp-cream); padding-block: clamp(2.5rem, 5vw, 4rem); }
.find-in-store__title { text-align: center; text-transform: uppercase; letter-spacing: .04em; font-size: clamp(1.35rem, 1rem + 1.6vw, 2rem); margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); color: var(--chomp-ink); }

.find-in-store__grid { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.5rem, 4vw, 3.5rem); }
.find-in-store__item { flex: 0 0 auto; }

.stockist { display: grid; place-items: center; min-width: 100px; max-width: 190px; text-decoration: none; opacity: .9; transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.stockist:hover, .stockist:focus-visible { opacity: 1; transform: translateY(-3px); text-decoration: none; }
.stockist:focus-visible { outline: 3px solid var(--chomp-focus); outline-offset: 6px; border-radius: 8px; }

/* Real brand logo, shown in full colour. The box is tall enough for near-square
   marks (the Rockets crest) to hold their own next to the wide wordmarks, which
   stay width-constrained by `contain`. */
.stockist__logo {
	display: block; width: clamp(110px, 13vw, 170px); height: clamp(56px, 6.5vw, 84px);
	background-image: var(--stockist-logo);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* Fallback lockup when no logo file has been dropped in yet. */
.stockist__word { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .07em; line-height: 1.2; font-size: clamp(.8rem, .7rem + .3vw, .95rem); color: var(--stockist-mint); text-align: center; }

/* Dark pill CTA (matches the reference lockup wall). */
.find-in-store__cta { text-align: center; margin: clamp(1.75rem, 4vw, 2.75rem) 0 0; }
.find-in-store__btn { background: var(--chomp-ink); color: #fff; border-radius: var(--radius-pill); padding: .85rem 1.9rem; font-weight: 700; display: inline-flex; align-items: center; gap: .5rem; }
.find-in-store__btn:hover { background: var(--chomp-teal-deep); color: #fff; text-decoration: none; }
.find-in-store__btn .icon { transition: transform var(--dur-fast) var(--ease-out); }
.find-in-store__btn:hover .icon { transform: translateX(3px); }

/* --- Store locator page --------------------------------------------------- */
.locator-map { height: clamp(340px, 48vh, 540px); width: 100%; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); background: var(--chomp-primary-soft); z-index: 0; }

/* Hero: copy + facts on the left, map on the right. */
.locator-hero__grid { display: grid; gap: var(--space-2xl); align-items: center; }
@media (min-width: 960px) { .locator-hero__grid { grid-template-columns: 1fr 1.1fr; gap: var(--space-3xl); } }
.locator-hero__title { margin: .3rem 0 .5rem; }
.locator-hero__content .lead { max-width: 34rem; }
.locator-hero__cta { margin-top: var(--space-xl); }
.locator-facts { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: grid; gap: .8rem; }
.locator-facts li { display: flex; gap: .8rem; align-items: center; font-weight: 600; font-size: var(--fs-sm); color: var(--chomp-ink-2); line-height: 1.4; }
.locator-facts__icon { flex: none; display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--chomp-surface); color: var(--chomp-primary-800); box-shadow: var(--shadow-xs); }

/* Cookie lineup + stocking pitch */
.locator-cookies__cta, .locator-stock__cta { text-align: center; margin: var(--space-2xl) 0 0; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.locator-stock__note { font-size: var(--fs-sm); }
.locator-benefits { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: grid; gap: var(--space-lg); grid-template-columns: 1fr; }
@media (min-width: 760px) { .locator-benefits { grid-template-columns: 1fr 1fr; } }
.locator-benefit { display: flex; gap: var(--space-md); align-items: flex-start; background: var(--chomp-surface); border: 1px solid var(--chomp-border); border-radius: var(--radius-lg); padding: var(--space-lg); }
.locator-benefit__icon { flex: none; display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--chomp-primary-soft); color: var(--chomp-primary-800); }
.locator-benefit__title { font-size: var(--fs-lg); margin: 0 0 .2rem; }
.locator-benefit__text { color: var(--chomp-ink-2); font-size: var(--fs-sm); margin: 0; }
.leaflet-container { font-family: var(--font-body); }
/* Brand map pin (Leaflet divIcon: a mint teardrop with a white centre). */
.locator-pin { background: none; border: 0; }
.locator-pin__dot { display: block; width: 26px; height: 26px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--chomp-primary); border: 3px solid var(--chomp-teal-deep); box-shadow: 0 3px 10px rgba(17,40,36,.35); }
.locator-pin__dot::after { content: ""; position: absolute; top: 8px; left: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--chomp-teal-deep); }

.locator-pop__name { font-family: var(--font-display); font-weight: 800; font-size: 1rem; display: block; margin-bottom: .15rem; color: var(--chomp-ink); }
.locator-pop__addr { color: var(--chomp-ink-2); display: block; margin-bottom: .4rem; }
.locator-pop__link { font-weight: 700; color: var(--chomp-primary-800); }

.locator-grid { list-style: none; margin: var(--space-2xl) 0 0; padding: 0; display: grid; gap: var(--space-lg); grid-template-columns: 1fr; }
@media (min-width: 640px) { .locator-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .locator-grid { grid-template-columns: repeat(3, 1fr); } }
.locator-card { position: relative; display: flex; flex-direction: column; gap: .35rem; background: var(--chomp-surface); border: 1px solid var(--chomp-border); border-radius: var(--radius-xl); padding: var(--space-xl); }
.locator-card__city { display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start; padding: .25rem .7rem; border-radius: var(--radius-pill); background: var(--chomp-primary-soft); color: var(--chomp-primary-800); font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .3rem; }
.locator-card__name { font-size: var(--fs-lg); margin: 0; }
.locator-card__addr { color: var(--chomp-ink-2); font-size: var(--fs-sm); margin: 0; }
.locator-card__note { color: var(--chomp-muted); font-size: var(--fs-sm); margin: .1rem 0 0; }
.locator-card__links { display: flex; flex-wrap: wrap; gap: .75rem 1.1rem; margin-top: auto; padding-top: var(--space-md); }
.locator-card__links a { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-size: var(--fs-sm); color: var(--chomp-primary-800); }

@media (prefers-reduced-motion: reduce) {
	.stockist, .find-in-store__btn .icon { transition: none; }
	.stockist:hover { transform: none; }
}