/* THEFLOW product page: "Make it extra special" gifts + Delivery section (replace Woodmart tabs). */

.tf-gifts,
.tf-delivery {
	--tf-gold: var(--tf-accent, #95774d); /* bronze accents (buttons use the beige --btn-accented-bgcolor) */
	--tf-ink: var(--wd-title-color, #242424);
	--tf-line: #e8e3db;
	--tf-gap: 16px;
	margin: 48px 0 0;
}

.tf-gifts__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 22px;
}
.tf-gifts__title {
	margin: 0;
	font-family: var(--wd-title-font, "Marcellus SC", serif);
	font-size: clamp(20px, 1.8vw, 26px);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: var(--tf-head-ls, -.01em);
	text-transform: uppercase;
	color: var(--tf-ink);
}

.tf-gifts__nav {
	display: flex;
	gap: 12px;
}
/* Arrows as in the reference: thin circle, short dark chevron; "next" has a bronze rim. */
.tf-gifts .tf-gifts__nav .tf-gifts__arrow {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	min-height: 0;
	padding: 0;
	color: #2b2a28;
	background: transparent;
	border: 1px solid #dedad3;
	border-radius: 50%;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .3s ease, border-color .3s ease, color .3s ease, opacity .3s ease;
}
.tf-gifts .tf-gifts__nav .tf-gifts__arrow[data-tf-dir="1"] {
	border-color: var(--tf-gold);
}
.tf-gifts .tf-gifts__nav .tf-gifts__arrow svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.tf-gifts .tf-gifts__nav .tf-gifts__arrow:hover:not(:disabled) {
	color: #fff;
	background: var(--tf-gold);
	border-color: var(--tf-gold);
}
@media (prefers-reduced-motion: reduce) {
	.tf-gifts .tf-gifts__nav .tf-gifts__arrow {
		transition: none;
	}
}
.tf-gifts .tf-gifts__nav .tf-gifts__arrow:disabled {
	opacity: .4;
	cursor: default;
}
.tf-gifts .tf-gifts__nav .tf-gifts__arrow:focus-visible {
	outline: 2px solid var(--tf-gold);
	outline-offset: 3px;
}

.tf-gifts__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 5 * var(--tf-gap)) / 6); /* 6 per row */
	gap: var(--tf-gap);
	margin: 0;
	padding: 0 0 4px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	list-style: none;
}
.tf-gifts__track::-webkit-scrollbar {
	display: none;
}

.tf-gift { /* no frame: photo, then name and price — as the related products */
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	text-align: center;
	background: transparent;
	border: 0;
	scroll-snap-align: start;
}
.tf-gift__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1; /* product photos are square: no cropping */
	overflow: hidden;
	background: #f4f2ee;
}
.tf-gift__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.2, .6, .2, 1);
}
@media (hover: hover) {
	.tf-gift:hover .tf-gift__media img {
		transform: scale(1.03);
	}
}
.tf-gift__badge {
	font-family: var(--tf-label-font, "TF Tenor Sans", Georgia, serif); /* small caps subheading: label font */
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 4px 8px;
	font-size: 10px;
	line-height: 1;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #fff;
	background: var(--tf-gold);
	border-radius: 3px;
}
.tf-gifts h3.tf-gift__name { /* as the related products: Marcellus SC, 14px */
	margin: 12px 10px 2px;
	font-family: var(--wd-entities-title-font, "Marcellus SC", serif);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
}
.tf-gift__name a {
	color: #333;
}
.tf-gift__price {
	margin: 0;
	font-size: 14px;
	color: var(--tf-accent, #95774d); /* bronze, as all prices */
}
.tf-gift__price .amount {
	color: inherit;
}
.tf-gift__visual {
	position: relative;
	overflow: hidden;
	border-radius: 6px;
}
/* Add to cart: a bronze bar with a cart icon that slides up over the photo on hover
   (as on the related products); hidden on touch screens. */
.tf-gifts .tf-gift .tf-gift__add {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--btn-accented-bgcolor, #bc9764);
	color: #fff;
	transform: translateY(101%);
	transition: transform .3s ease, background-color .2s ease;
}
.tf-gifts .tf-gift:hover .tf-gift__add,
.tf-gifts .tf-gift:focus-within .tf-gift__add,
.tf-gifts .tf-gift .tf-gift__add.added {
	transform: none;
}
.tf-gifts .tf-gift .tf-gift__add:hover {
	background: var(--btn-accented-bgcolor-hover, #84693f);
	color: #fff;
}
@media (hover: none) {
	/* Touch screens: no cart bar; tapping the photo or name opens the gift. */
	.tf-gifts .tf-gift .tf-gift__add {
		display: none;
	}
}
.tf-gift__icon {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.tf-gift__icon--added,
.tf-gift__add.added .tf-gift__icon--cart {
	display: none;
}
.tf-gift__add.added .tf-gift__icon--added {
	display: block;
}
.tf-gift__add.loading {
	opacity: .7;
	pointer-events: none;
}
.tf-gift__add::after {
	display: none !important; /* theme's loading spinner pseudo-element */
}
/* WooCommerce appends a "View cart" link after AJAX add; the header cart already updates. */
.tf-gift .added_to_cart {
	display: none !important;
}

.tf-delivery__title {
	margin: 0 0 22px;
}

/* ---------- Delivery step by step ---------- */

.tf-dlv {
	--tf-gold: var(--tf-accent, #95774d); /* bronze accents (buttons use the beige --btn-accented-bgcolor) */
	--tf-ink: var(--wd-title-color, #242424);
	--tf-muted: #6f655a;
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(32px, 5vw, 72px);
	margin: 56px 0 0;
	padding: clamp(40px, 5vw, 80px) 0;
	background: #f2efea;
	/* Full-bleed background, content stays in the site container; no horizontal scroll. */
	box-shadow: 0 0 0 100vmax #f2efea;
	clip-path: inset(0 -100vmax);
}
.tf-dlv__curve {
	position: absolute;
	top: 0;
	bottom: 0;
	/* Edge to edge of the screen (the section background is full-bleed too);
	   --tf-sbw = scrollbar width, set by gifts.js, so no horizontal scroll appears. */
	left: calc(50% - (100vw - var(--tf-sbw, 0px)) / 2);
	width: calc(100vw - var(--tf-sbw, 0px));
	height: 100%;
	pointer-events: none;
	fill: none;
	stroke: #c6a978;
	stroke-width: 1.2;
	opacity: .55;
	z-index: 0; /* behind the photos and the text */
}
.tf-dlv__curve path {
	vector-effect: non-scaling-stroke; /* same hairline at any section size */
}

.tf-dlv__curve--narrow {
	display: none;
}
.tf-dlv__rule {
	display: block;
	width: 56px;
	height: 1px;
	margin: 0 0 18px;
	background: var(--tf-gold);
}
.tf-dlv__collage {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
.tf-dlv__col {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.tf-dlv__col--offset {
	padding-top: 32px;
}
.tf-dlv__img {
	margin: 0;
	overflow: hidden;
	background: #e9e4dd;
	border-radius: 4px;
}
.tf-dlv__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.tf-dlv__img--tall { aspect-ratio: 4 / 5; }
.tf-dlv__img--wide { aspect-ratio: 5 / 4; }
.tf-dlv__img--square { aspect-ratio: 1 / 1; }

.tf-dlv__body {
	position: relative;
	z-index: 2;
}
.tf-dlv__eyebrow {
	font-family: var(--tf-label-font, "TF Tenor Sans", Georgia, serif); /* small caps subheading: label font */
	margin: 0 0 14px;
	font-size: 12px;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--tf-gold);
}
.tf-dlv__title {
	margin: 0 0 14px;
	font-family: var(--wd-title-font, "Marcellus SC", serif);
	font-size: clamp(24px, 2.3vw, 32px);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: var(--tf-head-ls, -.01em);
	text-transform: uppercase;
	color: var(--tf-ink);
}
.tf-dlv__lead {
	max-width: 30em;
	margin: 0 0 30px;
	font-size: 17px;
	line-height: 1.55;
	color: var(--tf-muted);
}
.tf-dlv__steps {
	position: relative;
	display: grid;
	gap: 26px;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}
.tf-dlv__steps::before { /* the thread connecting the icons */
	content: "";
	position: absolute;
	top: 26px;
	bottom: 26px;
	left: 26px;
	width: 1px;
	background: #d8c6a6;
}
.tf-dlv__step {
	position: relative;
	display: grid;
	grid-template-columns: 52px 1fr;
	align-items: center;
	gap: 22px;
	margin: 0;
}
.tf-dlv__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	color: var(--tf-gold);
	background: #f8f6f2;
	border: 1px solid #d8c6a6;
	border-radius: 50%;
}
.tf-dlv__icon svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.tf-dlv__name {
	font-family: var(--tf-label-font, "TF Tenor Sans", Georgia, serif); /* small caps subheading: label font */
	display: block;
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--tf-ink);
}
.tf-dlv__desc {
	display: block;
	font-size: 15px;
	line-height: 1.5;
	color: var(--tf-muted);
}
.tf-dlv__button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 42px;
	padding: 0 20px;
	font-family: var(--tf-head-font, "TF Tenor Sans", Georgia, serif); /* buttons: Tenor Sans, tight, a touch heavier */
	font-size: 13px;
	font-weight: 400;
	-webkit-text-stroke: .4px currentColor;
	letter-spacing: var(--tf-head-ls, 0);
	text-transform: uppercase;
	color: #fff;
	background: var(--btn-accented-bgcolor, #bc9764);
	border-radius: 4px;
	transition: background-color .2s ease;
}
.tf-dlv__button:hover,
.tf-dlv__button:focus-visible {
	color: #fff;
	background: var(--btn-accented-bgcolor-hover, #84693f);
}

@media (max-width: 900px) {
	.tf-dlv {
		grid-template-columns: 1fr;
	}
	/* Stacked layout: two hairlines (+ a small arc) behind the photos, visible around them
	   and in the free strip right of the text. */
	.tf-dlv__curve--wide {
		display: none;
	}
	.tf-dlv__curve--narrow {
		display: block;
		z-index: 0; /* behind the photos and the text */
	}
	.tf-dlv__body {
		z-index: 3;
		padding-right: 44px; /* free strip for the line */
	}
	/* All four photos, two by two. */
	.tf-dlv__collage {
		grid-template-columns: 1fr 1fr;
	}
	.tf-dlv__col {
		display: contents;
	}
	.tf-dlv__collage .tf-dlv__img {
		grid-column: auto;
		aspect-ratio: 4 / 5;
	}
	.tf-dlv__img--hero {
		order: 1;
	}
	.tf-dlv__img--bag {
		order: 2;
	}
	.tf-dlv__img--envelope {
		order: 3;
	}
	.tf-dlv__img--care {
		order: 4;
	}
	/* The text keeps a strip on the right for the line; the button spans the full width, centred. */
	.tf-dlv__button {
		width: calc(100% + 44px);
	}
}
@media (max-width: 767px) {
	.tf-dlv {
		margin-top: 40px;
		padding: 28px 0 32px;
		gap: 28px;
	}
	.tf-dlv__collage,
	.tf-dlv__col {
		gap: 10px;
	}
	.tf-dlv__lead {
		margin-bottom: 24px;
		font-size: 16px;
	}
	.tf-dlv__steps {
		gap: 20px;
	}
	.tf-dlv__steps::before {
		top: 22px;
		bottom: 22px;
		left: 22px;
	}
	.tf-dlv__step {
		grid-template-columns: 44px 1fr;
		gap: 16px;
	}
	.tf-dlv__icon {
		width: 44px;
		height: 44px;
	}
	.tf-dlv__name {
		letter-spacing: .14em;
	}
	.tf-dlv__desc {
		font-size: 14.5px;
	}
}

@media (max-width: 1024px) {
	.tf-gifts__track {
		grid-auto-columns: calc((100% - 3 * var(--tf-gap)) / 3.6);
	}
}
@media (max-width: 767px) {
	.tf-gifts,
	.tf-delivery {
		--tf-gap: 12px;
		margin-top: 36px;
	}
	.tf-gifts__nav {
		display: none; /* swipe on phones */
	}
	.tf-gifts__track {
		grid-auto-columns: 62%;
		margin: 0 -15px;
		padding: 0 15px 4px;
		scroll-padding: 0 15px;
	}
	.tf-gifts h3.tf-gift__name {
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tf-gift__media img,
	.tf-gifts__arrow,
	.tf-gift__add {
		transition: none;
	}
}

/* Delivery right under the product (no gift carousel above it): no extra top gap or divider line. */
.product-tabs-inner > .tf-dlv:first-child {
	margin-top: 0;
}
.product-tabs-wrapper:has(> .product-tabs-inner > .tf-dlv:first-child) {
	padding-top: 0;
	border-top: 0;
}