/* Home page: "Stories from local LA customers" — Instagram moments carousel. */

.tf-stories {
	--tf-gold: var(--tf-accent, #95774d); /* bronze accents (buttons use the beige --btn-accented-bgcolor) */
	--tf-ink: #1f1f1f;
	--tf-muted: #6b6259;
	--tf-gap: 12px;
	position: relative;
	padding: clamp(44px, 5vw, 72px) 0 clamp(44px, 5vw, 64px);
	text-align: center;
	background: #efebe6;
	/* Full-bleed background, content stays in the site container; no horizontal scroll. */
	box-shadow: 0 0 0 100vmax #efebe6;
	clip-path: inset(0 -100vmax);
}

.tf-stories__head {
	max-width: 1040px;
	margin: 0 auto clamp(28px, 3vw, 40px);
}
.tf-stories__eyebrow {
	margin: 0 0 12px;
	font-family: var(--tf-label-font, "TF Tenor Sans", Georgia, serif);
	font-size: 12px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--tf-gold);
}
.single-product .tf-stories__title,
.tf-stories .tf-stories__title {
	margin: 0;
	font-family: var(--tf-head-font, "TF Tenor Sans", Georgia, serif);
	font-size: clamp(20px, 1.8vw, 26px); /* same scale as the other section titles */
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: var(--tf-head-ls, -.01em);
	text-transform: uppercase;
	color: var(--tf-ink);
}
.tf-stories__rule {
	display: block;
	width: 56px;
	height: 1px;
	margin: 18px auto 16px;
	background: var(--tf-gold);
}
.tf-stories__lead {
	margin: 0;
	font-family: var(--wd-text-font, "Lora"), Georgia, serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--tf-muted);
}

/* ---------- Carousel ---------- */

.tf-stories__carousel {
	position: relative;
}
.tf-stories__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 5 * var(--tf-gap)) / 6); /* 6 in view */
	gap: var(--tf-gap);
	margin: 0;
	padding: 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	list-style: none;
}
.tf-stories__track::-webkit-scrollbar {
	display: none;
}
.tf-stories__item {
	margin: 0;
	scroll-snap-align: start;
}
.tf-stories__link {
	position: relative;
	display: block;
	aspect-ratio: 15 / 16;
	overflow: hidden;
	border-radius: 6px;
	background: #e2dcd3;
	box-shadow: 0 10px 24px -18px rgba(40, 30, 20, .45);
}
.tf-stories__media {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.2, .6, .2, 1);
}
.tf-stories__overlay {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgba(20, 16, 12, .28);
	color: #fff;
	opacity: 0;
	transition: opacity .3s ease;
}
.tf-stories__ig-icon {
	width: 30px;
	height: 30px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
}
.tf-stories__ig-icon circle:last-child {
	fill: currentColor;
	stroke: none;
}
@media (hover: hover) {
	.tf-stories__link:hover .tf-stories__media {
		transform: scale(1.04);
	}
	.tf-stories__link:hover .tf-stories__overlay {
		opacity: 1;
	}
}
.tf-stories__link:focus-visible {
	outline: 2px solid var(--tf-gold);
	outline-offset: 3px;
}

/* Arrows outside the row, thin bronze circles. */
.tf-stories .tf-stories__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: inline-grid;
	place-items: center;
	width: 52px;
	height: 52px;
	min-height: 0;
	margin-top: -26px;
	padding: 0;
	border: 1px solid var(--tf-gold);
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: var(--tf-gold);
	cursor: pointer;
	transition: background-color .3s ease, color .3s ease, opacity .3s ease;
}
.tf-stories__arrow--prev {
	left: -76px;
}
.tf-stories__arrow--next {
	right: -76px;
}
.tf-stories__arrow svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.tf-stories .tf-stories__arrow:hover:not(:disabled) {
	background: var(--tf-gold);
	color: #fff;
}
.tf-stories .tf-stories__arrow:disabled {
	opacity: .35;
	cursor: default;
}

/* ---------- Buttons ---------- */

.tf-stories__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px 28px;
	margin-top: clamp(28px, 3vw, 36px);
}
.tf-stories .tf-stories__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 42px;
	padding: 0 28px;
	border-radius: 4px;
	background: var(--btn-accented-bgcolor, #bc9764);
	color: #fff;
	font-family: var(--tf-head-font, "TF Tenor Sans", Georgia, serif);
	font-size: 13px;
	-webkit-text-stroke: .4px currentColor;
	letter-spacing: var(--tf-head-ls, 0);
	text-transform: uppercase;
	transition: background-color .2s ease;
}
.tf-stories .tf-stories__btn:hover {
	background: var(--btn-accented-bgcolor-hover, #84693f);
	color: #fff;
}

/* Instagram: a black button beside "About delivery", the Instagram glyph on its right. */
.tf-stories .tf-stories__follow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 42px;
	padding: 0 24px;
	border-radius: 4px;
	background: #111;
	color: #fff;
	font-family: var(--tf-head-font, "TF Tenor Sans", Georgia, serif);
	font-size: 13px;
	-webkit-text-stroke: .4px currentColor;
	letter-spacing: var(--tf-head-ls, 0);
	text-transform: uppercase;
	transition: background-color .2s ease;
}
.tf-stories .tf-stories__follow:hover {
	background: #3a3a3a;
	color: #fff;
}
.tf-stories__ig {
	flex: none;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
}
.tf-stories__ig circle:last-child {
	fill: currentColor;
	stroke: none;
}
@media (max-width: 767px) {
	.tf-stories__cta {
		flex-wrap: nowrap;
		gap: 10px;
	}
	.tf-stories .tf-stories__btn,
	.tf-stories .tf-stories__follow {
		flex: 1 1 0;
		justify-content: center;
		min-width: 0;
		padding: 0 12px;
		white-space: nowrap;
	}
}


/* Arrows move inside on narrower desktops. */
@media (max-width: 1360px) {
	.tf-stories__arrow--prev {
		left: -20px;
	}
	.tf-stories__arrow--next {
		right: -20px;
	}
	.tf-stories .tf-stories__arrow {
		width: 44px;
		height: 44px;
		margin-top: -22px;
		background: rgba(239, 235, 230, .9);
	}
}
@media (max-width: 1024px) {
	.tf-stories__track {
		grid-auto-columns: calc((100% - 3 * var(--tf-gap)) / 3.6);
	}
}
@media (max-width: 767px) {
	.tf-stories__track {
		grid-auto-columns: 62%;
		margin: 0 -15px;
		padding: 0 15px;
		scroll-padding: 0 15px;
	}
	.tf-stories .tf-stories__arrow {
		display: none; /* swipe */
	}
	.tf-stories__lead {
		font-size: 14px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.tf-stories__media,
	.tf-stories__overlay,
	.tf-stories .tf-stories__arrow {
		transition: none;
	}
}