/* ==========================================================================
   Discover Darwen Market Stall Directory
   Standalone stylesheet loaded after main.css.
   ========================================================================== */

.section--market-stall-directory {
	background: var(--dd-palest-green);
	padding: 0;
}

.market-stall-directory__intro-wrap {
	background: var(--dd-market-blue);
	color: var(--dd-white);
	padding: 8rem 0;
}

.market-stall-directory__intro {
	align-items: start;
	display: grid;
	gap: clamp(3rem, 7vw, 10rem);
	grid-template-columns: minmax(0, 0.8fr) minmax(30rem, 1fr);
}

.market-stall-directory__title {
	color: var(--dd-white);
	margin: 0;
}

.market-stall-directory__intro-text {
	color: var(--dd-white);
	max-width: 62rem;
}

.market-stall-directory__intro-text > :first-child {
	margin-top: 0;
}

.market-stall-directory__intro-text > :last-child {
	margin-bottom: 0;
}

.market-stall-directory__body {
	background: var(--dd-palest-green);
	padding-bottom: clamp(7rem, 9vw, 12rem);
}	

.market-stall-directory__tabs-wrap {
	margin-bottom: clamp(4rem, 6vw, 7rem);
}

.market-stall-directory__filters {
	display: grid;
	grid-template-columns: repeat(
		var(--market-stall-tab-count),
		minmax(0, 1fr)
	);
	margin: 0 auto;
	max-width: 100%;
}

.market-stall-directory__filter {
	align-items: center;
	appearance: none;
	background: var(--dd-white);
	border: 0;
	border-right: 2px solid var(--dd-palest-green);
	color: var(--dd-dark-green);
	display: flex;
	font-weight: 700;
	    gap: 1.5rem;
	justify-content: center;
	min-height: 7rem;
	padding: 1.5rem 2rem;
	text-align: center;
}

.market-stall-directory__filter:first-child {
	border-left: 0.1rem solid var(--dd-pale-green);
}

.market-stall-directory__filter:hover,
.market-stall-directory__filter:focus-visible {
	background: var(--dd-pale-green);
	color: var(--dd-dark-green);
	outline: 0;
}

.market-stall-directory__filter.is-active {
	background: var(--dd-palest-green);
	color: var(--dd-dark-green);
}

.market-stall-directory__filter-icon {
	align-items: center;
	color: var(--dd-market-blue);
	display: inline-flex;
	flex: 0 0 auto;
	justify-content: center;
}

.market-stall-directory__filter.is-active
.market-stall-directory__filter-icon {
	color: var(--dd-dark-green);
}

.market-stall-directory__filter-icon svg {
	display: block;
	fill: currentColor;
	height: 2rem;
	overflow: visible;
	width: 2rem;
}

.market-stall-directory__filter-label {
	color: currentColor;
	display: block;
	
	line-height: 1.2;
}

.market-stall-directory__count {
	color: var(--dd-dark-green);
	font-weight: 600;
	margin: 0 0 3rem;
	text-align: center;
}

.market-stall-directory__grid {
	row-gap: 3rem;
}

.market-stall-directory__item {
	display: flex;
	margin-bottom: 0;
}

.market-stall-directory__item[hidden] {
	display: none !important;
}

.market-stall-figure {
	background: var(--dd-white);
	border-radius: 1.8rem;
	display: grid;
	grid-template-columns: minmax(20rem, 44%) minmax(0, 1fr);
	height: 100%;
	overflow: hidden;
	width: 100%;
}

.market-stall-figure .place-figure__visual {
	height: 100%;
	min-height: 34rem;
}

.market-stall-figure__image-button,
.market-stall-figure__title-button {
	appearance: none;
	background: none;
	border: 0;
	color: inherit;
	display: block;
	font: inherit;
	margin: 0;
	padding: 0;
	text-align: left;
	width: 100%;
}

.market-stall-figure__image-button {
	cursor: pointer;
	height: 100%;
}

.market-stall-figure .place-figure__image,
.market-stall-figure .place-figure__image--placeholder {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.market-stall-figure__content {
	display: flex;
	flex-direction: column;
	padding: clamp(2.8rem, 4vw, 4.5rem);
}

.market-stall-figure .place-figure__labels {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	margin-bottom: 1.6rem;
}

.market-stall-figure .place-figure__label {
	background: var(--dd-pale-green);
	border-radius: 999rem;
	color: var(--dd-dark-green);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1;
	padding: 0.7rem 1rem;
	text-transform: uppercase;
}

.market-stall-figure .place-figure__title {
	margin: 0 0 1.4rem;
}

.market-stall-figure__title-button {
	cursor: pointer;
	font-family: "ivypresto-headline", serif;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

.market-stall-figure__title-button:hover,
.market-stall-figure__title-button:focus-visible {
	color: var(--dd-market-blue);
	outline: 0;
}

.market-stall-figure__location {
	color: var(--dd-dark-green);
	font-weight: 700;
	margin: 0 0 1.6rem;
}

.market-stall-figure .place-figure__summary {
	margin-bottom: 2.5rem;
}

.market-stall-figure .place-figure__button {
	align-self: flex-start;
	padding-top:1.5rem;
	margin-top: auto;
}

.market-stall-directory__empty {
	background: var(--dd-white);
	border-radius: 1.4rem;
	padding: 2.5rem;
	text-align: center;
}

.market-stall-directory__empty > :last-child {
	margin-bottom: 0;
}

.market-stall-directory__modals {
	height: 0;
	overflow: hidden;
	position: absolute;
	width: 0;
}

/* ==========================================================================
   Trader modal
   ========================================================================== */

.market-stall-modal__dialog {
	border-radius: 2.4rem;
	height: min(76rem, calc(100svh - 12rem));
	max-height: min(76rem, calc(100svh - 12rem));
	max-width: calc(100% - 4rem);
	overflow: hidden;
	width: min(112rem, calc(100% - 4rem));
}

.market-stall-modal__layout {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(38rem, 1.05fr);
	height: 100%;
	max-height: 100%;
}

.market-stall-modal__media {
	background: var(--dd-pale-green);
	height: 100%;
	min-width: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: clamp(2.5rem, 4vw, 4rem);
	scrollbar-gutter: stable;
}

.market-stall-modal__main-visual {
	aspect-ratio: 4 / 3;
	border-radius: 1.6rem;
	box-shadow: 0 1rem 3rem rgba(29, 52, 54, 0.12);
}

.market-stall-modal__content {
	height: 100%;
	max-height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: clamp(4rem, 6vw, 7rem);
	scrollbar-gutter: stable;
}

.market-stall-modal__gallery {
	margin-top: 2rem;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.market-stall-modal__gallery-slides {
	overflow: visible;
}

.market-stall-modal__gallery-slides .slick-list {
	overflow: visible;
	width: calc(100% - 5rem);
}

.market-stall-modal__gallery-slide {
	aspect-ratio: 16 / 10;
	padding-right: 1rem;
}

.market-stall-modal__gallery-image {
	border-radius: 1.2rem;
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.market-stall-modal__gallery-controls {
	display: flex;
	gap: 0.8rem;
	margin-top: 1.5rem;
}

.market-stall-modal .site-modal__close {
	background: var(--dd-dark-green);
	color: var(--dd-white);
}

.market-stall-modal .site-modal__close:hover,
.market-stall-modal .site-modal__close:focus-visible {
	background: var(--dd-medium-green);
	color: var(--dd-white);
}

.market-stall-modal__labels {
	margin-bottom: 2rem;
}

.market-stall-modal__summary {
	color: var(--dd-medium-green);
	font-size: 1.15em;
	font-weight: 600;
	line-height: 1.5;
	margin: 0 0 3rem;
}

.market-stall-modal__contact {
	border-bottom: 0.1rem solid var(--dd-grey);
	border-top: 0.1rem solid var(--dd-grey);
	margin: 3rem 0;
	padding: 3rem 0;
}

.market-stall-modal__section-title {
	color: var(--dd-dark-green);
	font-size: 1.6em;
	margin: 0 0 1.8rem;
}

.market-stall-modal__contact-list {
	display: grid;
	gap: 1.2rem;
	margin: 0;
}

.market-stall-modal__contact-list > div {
	display: grid;
	gap: 1rem;
	grid-template-columns: minmax(9rem, 0.35fr) minmax(0, 1fr);
}

.market-stall-modal__contact-list dt {
	color: var(--dd-dark-green);
	font-weight: 700;
}

.market-stall-modal__contact-list dd {
	margin: 0;
}

.market-stall-modal__contact-list a {
	color: var(--dd-market-blue);
	font-weight: 700;
}

.market-stall-modal__social {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 3rem;
}

.market-stall-modal__description {
	margin-top: 3rem;
}


@media screen and (min-width:1023px) {
	.market-stall-directory__intro, 
	.section__primary-title.market-stall-directory__title {
		text-align: center;
        margin: 0 auto;
        display: flex;
	}
}


@media (max-width: 1023px) {
	.market-stall-modal__dialog {
		height: auto;
		max-height: calc(100svh - 3rem);
		overflow-y: auto;
	}

	.market-stall-modal__layout {
		height: auto;
		max-height: none;
	}

	.market-stall-modal__content {
		height: auto;
		max-height: none;
		overflow: visible;
	}

	.market-stall-directory__intro {
		display: block;
	}

	.market-stall-directory__title {
		margin-bottom: 2.5rem;
	}

	.market-stall-directory__filters {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.market-stall-figure {
		display: flex;
		flex-direction: column;
	}

	.market-stall-directory__count {
		text-align: left;
	}
	.market-stall-figure .place-figure__visual {
		aspect-ratio: 16 / 10;
		min-height: 0;
	}

	.market-stall-modal__layout {
		display: block;
	}

	.market-stall-modal__gallery {
		width: 100%;
	}

	.market-stall-modal__media {
		height: auto;
		overflow: visible;
	}
}

@media (max-width: 767px) {
	.market-stall-directory__intro-wrap {
		padding: 5rem 0;
	}

	.market-stall-directory__filters {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x proximity;
	}

	.market-stall-directory__filter {
		flex: 0 0 auto;
		justify-content: flex-start;
		min-height: 6rem;
		padding: 1.3rem 1.8rem;
		scroll-snap-align: start;
	}

	.market-stall-directory__item {
		width: 100%;
	}

	.market-stall-modal__dialog {
		border-radius: 2rem;
		max-height: calc(100svh - 2.5rem);
		max-width: calc(100% - 2.5rem);
		width: calc(100% - 2.5rem);
	}

	.market-stall-modal__media {
		padding: 1.5rem;
	}

	.market-stall-modal__content {
		padding: 3rem 2.5rem 4rem;
	}

	.market-stall-modal__contact-list > div {
		display: block;
	}

	.market-stall-modal__contact-list dt {
		margin-bottom: 0.25rem;
	}
}


/* ==========================================================================
   Market Stall gallery controls, mobile end padding and image lightbox
   ========================================================================== */

.market-stall-modal__image-link {
	display: block;
	height: 100%;
	width: 100%;
}

.market-stall-modal__gallery-footer {
	align-items: center;
	display: flex;
	gap: 2rem;
	justify-content: space-between;
	margin-top: 1.5rem;
}

.market-stall-modal__gallery-controls {
	display: flex;
	flex: 0 0 auto;
	gap: 0.8rem;
	margin: 0;
}

.market-stall-modal__gallery-count {
	color: var(--dd-dark-green);
	font-size: 1.3rem;
	font-weight: 700;
	margin-left: auto;
	text-align: right;
}

.market-stall-modal__mobile-gallery {
	display: none;
}

/* Magnific Popup must sit above the existing site modal. */
.market-stall-image-popup.mfp-bg {
	z-index: 11000;
}

.market-stall-image-popup.mfp-wrap {
	z-index: 11001;
}

@media (max-width: 1023px) {
	.market-stall-modal__desktop-media {
		display: none;
	}

	.market-stall-modal__mobile-gallery {
		display: block;
		overflow: hidden;
	}

	.market-stall-modal__mobile-gallery-slides {
		margin-right: -1.5rem;
	}

	.market-stall-modal__mobile-gallery-slides .slick-list {
		overflow: visible;
	}

	.market-stall-modal__mobile-gallery-slide {
		aspect-ratio: 4 / 3;
		padding-right: 1.2rem;
	}

	.market-stall-modal__mobile-gallery-image {
		border-radius: 1.4rem;
		display: block;
		height: 100%;
		object-fit: cover;
		width: 100%;
	}
}

@media (max-width: 767px) {
	.market-stall-modal__media {
		overflow: hidden;
		padding: 1.5rem 0 1.5rem 1.5rem;
	}

	/*
	 * The final right padding is part of the slider viewport, so the last
	 * image finishes cleanly instead of being the only slide flush to the edge.
	 */
	.market-stall-modal__mobile-gallery {
		padding-right: 1.5rem;
	}

	.market-stall-modal__mobile-gallery-slides {
		margin-right: -1.5rem;
	}

	.market-stall-modal__gallery-footer {
		padding-right: 0;
	}

	.market-stall-modal__gallery-controls {
		justify-content: flex-start;
	}

	.market-stall-modal__gallery-count {
		padding-right: 0;
	}

.market-stall-modal .site-modal__close {
	background: var(--dd-dark-green);
	color: var(--dd-white);
	display: flex;
	margin-left: auto;
	margin-right: 1.5rem;
	position: sticky;
	right: auto;
	top: 1.5rem;
	z-index: 1000;
}
}



@media (min-width: 1024px) {
	.market-stall-modal__media {
		display: block;
	}

	.market-stall-modal__desktop-media {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 100%;
	}

	.market-stall-modal__main-visual {
		flex: 0 0 auto;
		height: auto !important;
	}

	.market-stall-modal__main-visual .site-modal__image {
		aspect-ratio: 4 / 3;
		height: auto;
		object-fit: cover;
		width: 100%;
	}
}


/* ==========================================================================\n   Final modal image treatment\n   ========================================================================== */
.market-stall-modal__mobile-header { display: none; }
.market-stall-modal__desktop-thumbs { margin-top: 2rem; }
.market-stall-modal__desktop-thumb-track:not(.slick-initialized) { display: grid; gap: 1rem; grid-template-columns: repeat(3,minmax(0,1fr)); }
.market-stall-modal__desktop-thumb-slide { padding-right: 1rem; }
.market-stall-modal__desktop-thumb { appearance:none; background:none; border:.2rem solid transparent; border-radius:1.2rem; display:block; overflow:hidden; padding:0; width:100%; }
.market-stall-modal__desktop-thumb.is-active { border-color:var(--dd-dark-green); }
.market-stall-modal__desktop-thumb-image { aspect-ratio:4/3; display:block; height:auto; object-fit:cover; width:100%; }
.market-stall-modal__thumb-controls { display:flex; gap:.8rem; margin-top:1.5rem; }

@media (max-width:1023px) {
  .market-stall-modal__mobile-header { background:var(--dd-white); display:block; padding: 4rem 2.5rem 4rem 2.5rem; margin-top: -38px;}
  .market-stall-modal__mobile-header .market-stall-modal__labels { margin-top:1.8rem; margin-bottom: 0; }
  .market-stall-modal__mobile-title { margin-bottom:0; padding-right:6rem; }
  .market-stall-modal__content > .market-stall-modal__labels,
  .market-stall-modal__content > .site-modal__title { display:none; }
  .market-stall-modal__desktop-media { display:none; }
  .market-stall-modal__mobile-gallery { display:block; }
}

@media (max-width:767px) {
  .market-stall-modal__media { overflow:hidden; padding:0; }
  .market-stall-modal__mobile-gallery { overflow:hidden; padding: 1.5rem 1.5rem 1.5rem 0; }
  .market-stall-modal__mobile-gallery-slides { margin:0 -1.5rem 0 0; padding-left:1.5rem; }
  .market-stall-modal__mobile-gallery-slides .slick-list { overflow:visible; }
  .market-stall-modal__mobile-gallery-slides .slick-track { padding-right:1.5rem; }
  .market-stall-modal__gallery-footer { padding:0 0 0 1.5rem; }
}

/* ==========================================================================
   Enlarged image gallery close control
   ========================================================================== */

.market-stall-image-popup .mfp-close {
	align-items: center;
	background: var(--dd-white);
	border-radius: 50%;
	box-shadow: 0 0.8rem 2.5rem rgba(29, 52, 54, 0.22);
	color: var(--dd-dark-green) !important;
	display: flex;
	font-family: "Figtree", sans-serif;
	font-size: 3rem !important;
	font-weight: 500;
	height: 5.4rem;
	justify-content: center;
	line-height: 1;
	opacity: 1;
	padding: 0;
	right: 2rem;
	text-align: center;
	top: 2rem;
	width: 5.4rem;
}

.market-stall-image-popup .mfp-close:hover,
.market-stall-image-popup .mfp-close:focus-visible {
	background: var(--dd-white);
	color: var(--dd-medium-green);
	opacity: 1;
	outline: 0;
}

.market-stall-image-popup .mfp-close:active {
	top: 2rem;
}

@media (max-width: 767px) {
	.market-stall-image-popup .mfp-close {
		height: 4.8rem;
		right: 1.5rem;
		top: 1.5rem;
		width: 4.8rem;
	}

	.market-stall-image-popup .mfp-close:active {
		top: 1.5rem;
	}
}

/* ==========================================================================
   Market Stall social buttons
   ========================================================================== */

.market-stall-modal__social-button {
	align-items: center;
	display: inline-flex;
	gap: 1rem;
}

.market-stall-modal__social-icon {
	align-items: center;
	display: inline-flex;
	flex: 0 0 auto;
	justify-content: center;
}

.market-stall-modal__social-icon svg {
	display: block;
	fill: currentColor;
	height: 1.8rem;
	width: 1.8rem;
}


/* ==========================================================================
   Shop Darwen badge and desktop gallery refinements
   ========================================================================== */

.market-stall-shop-darwen-badge {
	background: var(--dd-shop-green);
	border-radius: 999rem;
	color: var(--dd-dark-green);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1;
	padding: 0.8rem 1.1rem;
	position: absolute;
	text-transform: uppercase;
	z-index: 6;
}

.market-stall-figure .place-figure__visual,
.market-stall-modal__main-visual,
.market-stall-modal__mobile-gallery {
	position: relative;
}

.market-stall-figure__shop-darwen {
	left: clamp(2.8rem, 4vw, 4.5rem);
	top: clamp(2.8rem, 4vw, 4.5rem);
}

.market-stall-modal__shop-darwen {
	left: 1.5rem;
	top: 1.5rem;
}

.market-stall-modal__main-visual [data-market-stall-main-visual] {
	transition:
		opacity 0.28s ease,
		transform 0.28s ease;
}

.market-stall-modal__main-visual
[data-market-stall-main-visual].is-changing {
	opacity: 0;
	transform: scale(0.985);
}

.market-stall-modal__desktop-gallery-footer {
	align-items: center;
	display: flex;
	gap: 2rem;
	justify-content: space-between;
	margin-top: 1.5rem;
}

.market-stall-modal__desktop-gallery-footer
.market-stall-modal__gallery-count {
	margin-left: auto;
}

@media (max-width: 767px) {
	.market-stall-figure__shop-darwen {
		left: 1.5rem;
		top: 1.5rem;
	}
}


/* ==========================================================================
   Shop Darwen responsive placement
   ========================================================================== */

.market-stall-shop-darwen-badge {
	color: var(--dd-white);
}

.market-stall-shop-darwen-mobile-label {
	display: none;
}

@media (max-width: 767px) {
	/*
	 * On mobile, Shop Darwen becomes the first taxonomy-style pill instead of
	 * sitting over the card/modal image.
	 */
	.market-stall-figure__shop-darwen,
	.market-stall-modal__shop-darwen {
		display: none;
	}

	.market-stall-figure {
		position: relative;
	}




	.market-stall-shop-darwen-mobile-label {
		background: var(--dd-shop-green) !important;
		color: var(--dd-white) !important;
		position: absolute;
		display: inline-flex;
		top:2rem;
	}

	.market-stall-modal__dialog .market-stall-shop-darwen-mobile-label {
		position: static !important;
	}
}





@media screen and (min-width:1023px) {
	.market-stall-modal__shop-darwen {
		position: static;
	}
}