.shared-detail {
	margin-bottom: 70px;

	/*=====================================*/
	/*=====----- GALLERY + TITLE -----=====*/
	/*=====================================*/

	.detail-top,
	.detail-gallery {
		position: relative;
	}

	.detail-top {
		z-index: 2;
		margin-bottom: var(--space-10);
	}
	
	.detail-top-inner {
		max-width: 1260px;
		margin: 0 auto;
		background: var(--white);
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
	}

	.detail-top .background {
		position: absolute;
		inset: 0 0 auto;
		z-index: -1;
		display: none;
		max-height: 79%;
		background: var(--blue);
		overflow: hidden;

		.slide-img {
			opacity: 0.25;
		}
	}

	.slide-img {
		width: 100%;
	}

	.gallery-count {
		position: absolute;
		inset: auto 0 0 auto;
		z-index: 3;
		display: flex;
		align-items: center;
		gap: 5px;
		padding: var(--space-4) var(--space-5);
		font-family: var(--font-body);
		font-weight: var(--font-weight-normal);
		font-size: var(--text-lg);
		line-height: 1.2;
		color: var(--white);
		background: rgba(0, 0, 0, 0.4);
	}

	.info-section {
		padding: 30px var(--space-5);
	}

	.top-actions {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 14px;
	}

	.trip-builder a {
		font-size: var(--text-lg);
		text-decoration: none;
	}

	.title {
		margin-bottom: var(--space-5);
		font-family: var(--font-display);
		font-weight: var(--font-weight-bold);
		font-size: var(--text-3xl);
		line-height: 1.2;
		color: var(--gray-dark);
	}

	.bottom-actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-4);
	}

	.action-item.website,
	.action-item.calendar {
		display: inline-flex;
		align-items: center;
		gap: 10px;

		&::after {
			font: var(--fa-font-solid);
			font-size: var(--text-sm);
		}
	}

	.action-item.website::after {
		content: '\f35d';
	}

	.action-item.calendar::after {
		content: '\f736';
	}

	.dropdown {
		position: relative;
		width: 100%;
	}

	.dropdown-menu {
		position: absolute;
		inset: calc(100% + var(--space-5)) auto auto;
		z-index: 10;
		display: flex;
		flex-direction: column;
		align-items: start;
		width: 100%;
		max-width: max-content;
		gap: var(--space-4);
		padding: var(--space-5);
		color: var(--white);
		background: var(--blue);
		border-radius: var(--rounded-lg);
		box-shadow: var(--shadow-lg);

		&::before {
			position: absolute;
			inset: -16px auto auto var(--space-6);
			font: var(--fa-font-solid);
			font-size: 32px;
			color: var(--blue);
			content: '\f0d8';
		}

		a {
			display: inline-flex;
			align-items: baseline;
			gap: var(--space-2);
			text-decoration: none;
			color: inherit;
		}

		i {
			width: var(--space-5);
			flex-shrink: 0;
			text-align: center;
		}
	}

	/*==============================*/
	/*=====----- INFO BAR -----=====*/
	/*==============================*/

	.detail-info-bar,
	.split-pane {
		display: flex;
		flex-direction: column;
		gap: 30px;
	}

	.detail-info-bar {
		max-width: 1200px;
		padding: var(--space-5);
		margin: 0 auto var(--space-10);
	}

	.detail-list,
	.info-list {
		font-family: var(--font-body);
		font-weight: var(--font-weight-normal);
		font-size: var(--text-lg);
		line-height: 1.2;
		color: var(--gray-dark);

		li,
		a {
			font: inherit;
			text-decoration: none;
			color: inherit;
		}
	}

	.detail-list {
		display: grid;
		grid-template-columns: max-content minmax(0, 1fr);
		align-items: baseline;
		gap: 5px;
	}

	.info-list {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding: 0;
		margin: 0;
		list-style: none;

		li {
			display: flex;
			align-items: baseline;
			gap: 5px;
		}

		i {
			width: var(--space-5);
			flex-shrink: 0;
			text-align: center;
		}
	}

	.social-icons {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 10px;
		padding: 0;
		margin: 0;
		list-style: none;

		a {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 3.125rem;
			aspect-ratio: 1;
			font-size: var(--text-lg);
			line-height: 1;
			text-decoration: none;
			text-align: center;
			color: var(--white);
			background-color: var(--blue);
			border-radius: var(--rounded-circle);
		}
	}

	/*----- yelp snippet -----*/

	.yelp-snippet {
		margin-bottom: 8px;
	}

	.yelp-snippet .yelp-top {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.yelp-snippet .yelp-logo {
		order: -1;
		width: 60px;
	}

	.yelp-snippet .yelp-bottom {
		font-size: var(--text-xs);
		color: var(--gray-700);
	}
	
	/*=============================*/
	/*=====----- DRAWERS -----=====*/
	/*=============================*/

	.detail-drawers {
		max-width: 1260px;
		margin: 0 auto 70px;
	}

	.drawers {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: 10px;
	}

	.drawer-button {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-8);
		width: 100%;
		padding: var(--space-5) var(--space-16);
		margin: 0;
		font-family: var(--font-body);
		font-weight: var(--font-weight-bold);
		font-size: 1.375rem;
		line-height: 1.4;
		text-align: left;
		color: var(--gray-dark);
		background-color: var(--white);
		border: none;
		border-bottom: 1px solid #ccc;
		border-radius: 0;

		i {
			font-size: var(--text-lg);
			color: var(--gray);
		}
	}

	.drawer-content {
		display: none;
		padding: var(--space-5) 60px;

		.core-styles > *:last-child {
			margin-bottom: 0;
		}
	}

	.drawer.active .drawer-content {
		display: block;
	}

	.gMapContainer {
		margin-bottom: var(--space-4);
	}
	
	.gMapHolder { 
		height: 280px; 
	}
	
	/*----- yelp reviews -----*/

	#yelpTab {
		.reviews-provider-header {
			display: flex;
			align-items: center;
			gap: 12px;
		}
	
		.reviews-rating-line-text {
			font-size: var(--text-xs);
			color: var(--gray-700);
		}
	
		h4 {
			font-family: var(--font-display);
			font-weight: bold;
			font-size: var(--text-2xl);
			line-height: 1.1;
			color: var(--black);
		}
	
		.review {
			margin: 24px 0;
		}
	
		h4 + .review {
			margin-top: 12px;
		}
	
		.review-user-image {
			width: 100%;
		}
	
		.review-user {
			margin: 12px 0 8px;
			font-family: var(--font-body);
			font-weight: bold;
			font-size: var(--text-xs);
			line-height: 1.1;
			color: var(--black);
		}
	
		.review-rating {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 32px;
			margin-bottom: 12px;
			font-size: var(--text-xs);
			color: var(--gray-700);
		}
	
		.review-links {
			margin-top: 12px;
		}
	
		.review {
			display: grid;
			grid-template-columns: minmax(0, 1fr) minmax(0, 4fr);
			align-items: center;
			gap: 24px;
		}
	
		.review-meta,
		.review-user-image {
			position: relative;
		}
	
		.review-user-image {
			z-index: 1;
		}
	
		.review-user {
			position: absolute;
			inset: auto 0 0 auto;
			z-index: 2;
			padding: 4px 8px;
			margin: 0;
			background: rgba(0, 0, 0, 0.75);
			color: var(--white);
		}
	}

	/*----- viator -----*/

	.tourItem .rating {
		display: flex;
	}

	.tourItem .rating svg {
		width: var(--space-5);
		fill: var(--sw-text-color);
		margin-right: var(--space-2);
	}

	.tourItem .info-list li {
		margin-bottom: var(--space-3);
	}

	.tourItem .img-cont {
		flex: 1 0 auto;
	}

	/*===================================*/
	/*=====----- WHAT'S NEARBY -----=====*/
	/*===================================*/

	.whats-nearby {
		max-width: 1260px;
		padding: 0 var(--space-5);
		margin: 0 auto 70px;

		.title-cont {
			display: flex;
			flex-direction: column;
			gap: var(--space-5);
			text-align: center;
		}

		.title-cont {
			margin-bottom: var(--space-5);
		}

		.section-title {
			margin: 0;
			font-family: var(--font-family);
			font-weight: var(--font-weight-extrabold);
			font-size: var(--text-4xl);
			line-height: var(--leading-none);
			color: var(--blue);
		}

		.section-subtitle {
			margin: 0;
			font-family: var(--font-display);
			font-weight: var(--font-weight-bold);
			font-size: var(--text-lg);
			line-height: 1.3;
			color: #67625F;
		}

		.tab-group {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
			gap: var(--space-5);
			margin-bottom: var(--space-10);
		}

		.tab.active {
			--text-color: var(--white);
			--background-color: var(--red);
		}

		.glide__arrows {
			position: absolute;
			inset: auto -20px;
			z-index: 4;
			translate: 0 -50%;
			justify-content: space-between;
			pointer-events: none;
		}

		.glide__arrow {
			--arrow-color: var(--white);
			--arrow-bg-color: var(--blue);

			border-color: var(--white);
			box-shadow: none;
		}

		.image {
			position: relative;
			margin-bottom: 15px;
			border-radius: 10px;
			overflow: hidden;

			&::before {
				position: absolute;
				inset: 0;
				z-index: 2;
				display: block;
				content: '';
				background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 50%, rgba(0, 0, 0, 0.55) 100%);
				pointer-events: none;
			}
		}

		.thumb {
			width: 100%;
		}

		.item-title {
			margin: 0;
			font-family: var(--font-display);
			font-weight: var(--font-weight-medium);
			font-size: var(--text-lg);
			line-height: calc(25/18);
			color: var(--gray-dark);
		}

		.no-results {
			text-align: center;
		}
	}

	/*===================================*/
	/*=====----- MEDIA QUERIES -----=====*/
	/*===================================*/

	@media (min-width: 40em) {
		/*----- gallery + title -----*/

		.detail-top {
			padding: var(--space-5) var(--space-5) 0;
		}

		.detail-top .background {
			display: block;
		}

		.detail-top-inner {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			align-items: center;
			border-radius: 10px;
		}

		.detail-gallery-outer {
			border-radius: 10px 0 0 10px;
			overflow: hidden;
		}

		/*----- drawers -----*/

		#yelpTab .review-user {
			font-size: var(--text-base);
		}

		.gMapHolder { 
			height: 400px; 
		}

		/*----- what's nearby -----*/

		.whats-nearby .one-slide .glide__slides {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: var(--space-5);
		}
	}

	@media (min-width: 64em) {
		/*----- gallery + title -----*/

		.detail-top {
			padding: 164px var(--space-10) 0;
			margin-bottom: var(--space-20);
		}

		.info-section {
			padding: var(--space-10) 90px;
		}

		.top-actions {
			margin-bottom: 15px;
		}

		.title {
			font-size: 2.5rem;
			line-height: var(--leading-tight);
		}

		/*----- info bar -----*/

		.detail-info-bar {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: var(--space-10);
			width: calc(100% - 100px);
			padding: 0 var(--space-5);
			margin-bottom: var(--space-20);
		}

		.social-icons {
			gap: var(--space-5);
		}

		.yelp-snippet {
			margin-bottom: 26px;
		}

		.yelp-snippet .yelp-logo {
			width: 70px;
		}

		.yelp-snippet .yelp-bottom {
			font-size: var(--text-sm);
		}

		/*----- drawers -----*/

		.drawer-button {
			font-size: var(--text-2xl);
		}

		.drawer-content {
			padding: 50px 60px var(--space-10);
		}

		#yelpTab {
			h4 {
				font-size: var(--text-4xl);
			}

			.review-rating img {
				width: 100px;
			}

			.review-rating {
				font-size: var(--text-sm);
			}
		}

		/*----- what's nearby -----*/

		.whats-nearby .section-title {
			font-size: 2.75rem;
		}

		.whats-nearby .one-slide .glide__slides {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}
}