/*
 * Gift landing page kit (Twist Gifting). The Make It Personal design as reusable parts:
 * .twg-lp       every top-level section of a page built with the kit
 * .twg-hero     full-width photo with a white copy box in the middle
 * .twg-nav      2 x 2 section tiles (one column on phones)
 * .twg-cat      a category block: photo, short copy, button, then a product carousel
 * .twg-carousel product carousel (from the [twg_carousel] shortcode) with .twg-card cards
 * Square corners throughout (Twist rule).
 */

.twg-lp {
	--twg-ink: #111610;
	--twg-muted: #535d60;
	--twg-blue: #4dbbe6;
	--twg-line: #dce4e6;
	--twg-pale: #eff8fc;
	--twg-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--twg-gutter: 56px;
}

/* ---------- Structure (as the Make It Personal page) ---------- */

.twg-lp .twg-box.e-con,
.twg-lp.twg-box.e-con {
	padding: 0 !important;
	gap: 0 !important;
	min-height: 0;
	border-radius: 0;
}

.twg-lp .twg-box > .elementor-element,
.twg-lp.twg-box > .elementor-element {
	margin: 0 !important;
}

/* Top-level sections span the full width (the theme adds side gutters), then pad back to a 1280px column. */
.twg-lp.e-con.e-parent {
	width: calc(100% + 2 * var(--porto-fluid-spacing, 0px)) !important;
	max-width: none !important;
	margin-left: calc(var(--porto-fluid-spacing, 0px) * -1) !important;
	margin-right: calc(var(--porto-fluid-spacing, 0px) * -1) !important;
}

.twg-lp.twg-wrap.e-con.e-parent {
	padding-left: max(var(--twg-gutter), calc((100% + 2 * var(--porto-fluid-spacing, 0px) - 1280px) / 2)) !important;
	padding-right: max(var(--twg-gutter), calc((100% + 2 * var(--porto-fluid-spacing, 0px) - 1280px) / 2)) !important;
}

.twg-lp .twg-h .elementor-heading-title,
.twg-lp .twg-txt,
.twg-lp .twg-txt p,
.twg-lp .twg-html,
.twg-lp .twg-html p,
.twg-lp .twg-html span,
.twg-lp .twg-html a {
	font-family: var(--twg-font) !important;
	color: var(--twg-ink);
}

.twg-lp .twg-h .elementor-heading-title {
	margin: 0 !important;
	text-transform: none;
	color: var(--twg-ink) !important;
}

.twg-lp .twg-txt p,
.twg-lp .twg-html p {
	margin: 0 !important;
}

.twg-lp .twg-kicker .elementor-heading-title {
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.5 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
}

.twg-lp .twg-kicker--line .elementor-heading-title {
	display: flex;
	align-items: center;
	gap: 13px;
}

.twg-lp .twg-kicker--line .elementor-heading-title::before {
	content: "";
	flex: none;
	width: 30px;
	height: 2px;
	background: #71cae9;
}

/* As on Make It Personal, the accent line only marks the hero kicker. */
.twg-lp:not(.twg-hero) .twg-kicker--line .elementor-heading-title::before {
	display: none;
}

.twg-lp .twg-h2 .elementor-heading-title {
	font-size: 37px !important;
	font-weight: 300 !important;
	line-height: 1.18 !important;
	letter-spacing: -0.042em !important;
}

/* Category titles sit beside a photo, like Make It Personal's feature title. */
.twg-lp .twg-cat-copy .twg-h2 .elementor-heading-title {
	font-size: 49px !important;
	line-height: 1.06 !important;
	letter-spacing: -0.046em !important;
}

/* Buttons: black with an arrow, and an underlined text link. */
.twg-lp .twg-btn .elementor-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 15px 24px !important;
	border: 1px solid var(--twg-ink) !important;
	border-radius: 0 !important;
	background: var(--twg-ink) !important;
	color: #fff !important;
	font-family: var(--twg-font) !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	box-shadow: none !important;
	transition: background-color 0.18s, border-color 0.18s;
}

.twg-lp .twg-btn .elementor-button:hover {
	background: #2a363b !important;
	border-color: #2a363b !important;
}

.twg-lp .twg-btn .elementor-button-content-wrapper {
	display: flex !important;
	align-items: center;
	gap: 32px;
}

.twg-lp .twg-btn .elementor-button-content-wrapper::after {
	content: "";
	flex: none;
	width: 19px;
	height: 19px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.twg-lp a:focus-visible,
.twg-lp button:focus-visible,
.twg-lp .twg-carousel__track:focus-visible,
.twg-carousel a:focus-visible,
.twg-carousel button:focus-visible {
	/* !important: the theme removes outlines from every link with body a { outline: none !important }. */
	outline: 3px solid #2483a6 !important;
	outline-offset: 4px !important;
}

/* Text for screen readers only. */
.twg-sr {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ---------- Hero: photo with a white copy box ---------- */

.twg-lp.twg-hero.e-con {
	position: relative;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: clamp(480px, 42vw, 640px) !important;
	padding: 72px var(--twg-gutter) !important;
	background-color: #f2f9fc;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}

.twg-lp .twg-hero-box.e-con {
	width: min(640px, 100%) !important;
	max-width: 640px !important;
	padding: 46px 56px 44px !important;
	background: #fff !important;
	box-shadow: none;
	text-align: center;
}

.twg-lp .twg-hero-box .twg-kicker .elementor-heading-title {
	justify-content: center;
	margin-bottom: 18px !important;
}

.twg-lp .twg-hero-box .twg-kicker--line .elementor-heading-title::after {
	content: "";
	flex: none;
	width: 30px;
	height: 2px;
	background: #71cae9;
}

.twg-lp .twg-hero-title .elementor-heading-title {
	font-size: clamp(48px, 5.4vw, 80px) !important;
	font-weight: 300 !important;
	line-height: 1 !important;
	letter-spacing: -0.058em !important;
	text-align: center !important;
	margin-bottom: 20px !important;
}

.twg-lp .twg-hero-text p {
	max-width: 470px;
	text-wrap: balance;
	margin: 0 auto !important;
	font-size: 18px !important;
	line-height: 1.55 !important;
	color: var(--twg-muted) !important;
	text-align: center;
}

/* ---------- Section tiles ---------- */

.twg-lp.twg-navwrap.e-con {
	padding-top: 64px !important;
	padding-bottom: 24px !important;
}

.twg-lp.twg-navwrap .twg-kicker .elementor-heading-title {
	margin-bottom: 11px !important;
}

.twg-lp.twg-navwrap .twg-h2 .elementor-heading-title {
	margin-bottom: 30px !important;
}

.twg-nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.twg-lp .twg-nav__tile {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--twg-ink);
	background: #fff;
	color: var(--twg-ink) !important;
	text-decoration: none !important;
	transition: border-color 0.18s;
}

.twg-lp .twg-nav__tile:hover {
	border-color: #2a363b;
}

.twg-nav__img {
	display: block;
	aspect-ratio: 2 / 1;
	overflow: hidden;
	background: #f3f3f3;
}

.twg-nav__img img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	transition: transform 0.35s;
}

.twg-nav__tile:hover .twg-nav__img img {
	transform: scale(1.03);
}

.twg-nav__text {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 4px 20px;
	padding: 20px 22px 22px;
}

.twg-lp .twg-nav__name {
	font-size: 23px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.03em;
}

.twg-lp .twg-nav__line {
	grid-column: 1;
	font-size: 15px;
	line-height: 1.5;
	color: var(--twg-muted) !important;
}

.twg-nav__arrow {
	grid-column: 2;
	grid-row: 1 / span 2;
	width: 44px;
	height: 44px;
	border: 1px solid var(--twg-ink);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111610' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v15M6 13l6 6 6-6'/%3E%3C/svg%3E") center / 20px no-repeat;
	transition: background-color 0.18s;
}

.twg-nav__tile:hover .twg-nav__arrow {
	background-color: var(--twg-pale);
}

.twg-nav__tile:hover .twg-nav__name {
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 1px;
}

/* ---------- Category block ---------- */

.twg-lp.twg-cat.e-con {
	padding-top: 88px !important;
	padding-bottom: 88px !important;
	scroll-margin-top: 90px;
}

.twg-lp.twg-cat.e-con + .twg-lp.twg-cat.e-con {
	border-top: 1px solid var(--twg-line) !important;
}

.twg-lp .twg-cat-intro.e-con {
	display: grid !important;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	align-items: center !important;
	gap: 72px !important;
}

.twg-lp .twg-cat-intro--rev.e-con {
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
}

.twg-lp .twg-cat-intro--rev > .twg-cat-photo {
	order: 2;
}

.twg-lp .twg-cat-intro > .elementor-element {
	width: auto !important;
	min-width: 0;
}

.twg-lp .twg-cat-photo {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #f3f3f3;
}

.twg-lp .twg-cat-photo .elementor-widget-container,
.twg-lp .twg-cat-photo a {
	height: 100%;
}

.twg-lp .twg-cat-photo img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	border-radius: 0 !important;
}

.twg-lp .twg-cat-copy.e-con {
	max-width: 480px !important;
}

.twg-lp .twg-cat-copy .twg-kicker .elementor-heading-title {
	margin-bottom: 16px !important;
}

.twg-lp .twg-cat-copy .twg-h2 .elementor-heading-title {
	margin-bottom: 18px !important;
}

.twg-lp .twg-cat-text p {
	text-wrap: pretty;
	font-size: 17px !important;
	line-height: 1.6 !important;
	color: var(--twg-muted) !important;
}

.twg-lp .twg-cat-price p {
	margin-top: 16px !important;
	font-size: 16px !important;
	color: var(--twg-muted) !important;
}

.twg-lp .twg-cat-price strong {
	font-weight: 500;
	color: var(--twg-ink);
}

.twg-lp .twg-cat-copy .twg-btn {
	margin-top: 26px !important;
}

.twg-lp.twg-box.twg-cat > .elementor-element.twg-cat-carousel {
	margin-top: 56px !important;
}

/* ---------- Product carousel ---------- */

.twg-carousel {
	--twg-per: 4;
	--twg-gap: 24px;
	--twg-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--twg-ink: #111610;
	--twg-muted: #535d60;
	--twg-line: #dce4e6;
	position: relative;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.twg-carousel__track {
	/* Positioned so hidden screen-reader text in prices (absolutely placed) stays inside the scroller. */
	position: relative;
	display: grid !important;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--twg-per) - 1) * var(--twg-gap)) / var(--twg-per));
	gap: var(--twg-gap);
	margin: 0 !important;
	padding: 1px !important;
	list-style: none !important;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.twg-carousel__track::-webkit-scrollbar {
	display: none;
}

.twg-carousel__item {
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	scroll-snap-align: start;
}

.twg-carousel__item::before {
	display: none !important;
}

.twg-carousel__nav {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 24px;
}

.twg-carousel.is-static .twg-carousel__nav {
	display: none;
}

.twg-carousel__bar {
	position: relative;
	flex: 1 1 auto;
	height: 2px;
	overflow: hidden;
	background: var(--twg-line);
}

.twg-carousel__bar span {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 25%;
	background: var(--twg-ink);
	transition: transform 0.2s ease, width 0.2s ease;
}

.twg-carousel__btn {
	flex: none;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--twg-ink) !important;
	border-radius: 0 !important;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111610' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 20px no-repeat !important;
	cursor: pointer;
	box-shadow: none !important;
	transition: background-color 0.18s, opacity 0.18s;
}

.twg-carousel__btn--prev {
	transform: scaleX(-1);
}

.twg-carousel__btn:hover {
	background-color: #eff8fc !important;
}

.twg-carousel__btn:disabled {
	opacity: 0.3;
	cursor: default;
}

/* Card (as the Make It Personal cards). */
.twg-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--twg-ink);
	background: #fff;
}

.twg-card__image {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #fafafa;
}

.twg-card__image img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: contain;
	border-radius: 0 !important;
	transition: transform 0.25s;
}

.twg-card:hover .twg-card__image img {
	transform: scale(1.025);
}

.twg-card__image--none {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #7c8f99;
	font-size: 14px;
	letter-spacing: 0.02em;
	text-decoration: none !important;
}

.twg-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 20px 16px 16px;
}

.twg-carousel .twg-card__eyebrow,
.twg-carousel .twg-card__title,
.twg-carousel .twg-card__desc,
.twg-carousel .twg-card__format,
.twg-carousel .twg-card__price,
.twg-carousel .twg-card__price *,
.twg-carousel .twg-card__button,
.twg-card__image--none {
	font-family: var(--twg-font) !important;
}

/* Keep rows level across a carousel: taglines and names always take two lines. */
.twg-carousel .twg-card__eyebrow {
	min-height: 3em;
}

.twg-carousel .twg-card__title {
	min-height: 2.64em;
}

.twg-carousel .twg-card__eyebrow {
	margin: 0 0 9px !important;
	font-size: 12px !important;
	line-height: 1.5 !important;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #54656d !important;
}

.twg-carousel .twg-card__title {
	margin: 0 !important;
	padding: 0 !important;
	font-family: inherit !important;
	font-size: 18px !important;
	font-weight: 500 !important;
	line-height: 1.32 !important;
	letter-spacing: -0.02em !important;
	text-transform: none !important;
	color: var(--twg-ink) !important;
}

.twg-carousel .twg-card__title a {
	color: inherit !important;
	text-decoration: none !important;
}

.twg-carousel .twg-card__title a:hover {
	text-decoration: underline !important;
	text-underline-offset: 4px;
}

.twg-carousel .twg-card__desc {
	margin: 10px 0 0 !important;
	font-size: 15px !important;
	line-height: 1.55 !important;
	color: var(--twg-muted) !important;
}

.twg-card__foot {
	margin-top: auto;
	padding-top: 12px;
}

.twg-carousel .twg-card__format {
	margin: 0 !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: var(--twg-muted) !important;
}

.twg-carousel .twg-card__price {
	margin: 6px 0 14px !important;
	font-size: 20px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	color: var(--twg-ink) !important;
}

.twg-carousel .twg-card__price * {
	font-size: inherit !important;
	font-weight: inherit !important;
	color: inherit !important;
}

.twg-carousel .twg-card__price del {
	margin-right: 6px;
	font-weight: 400 !important;
	color: var(--twg-muted) !important;
}

.twg-carousel .twg-card__button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 45px;
	padding: 12px 17px;
	border: 1px solid var(--twg-ink);
	background: var(--twg-ink);
	color: #fff !important;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none !important;
	transition: background-color 0.18s, border-color 0.18s;
}

.twg-carousel .twg-card__button::after {
	content: "";
	flex: none;
	width: 19px;
	height: 19px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.twg-carousel .twg-card__button:hover {
	background: #2a363b;
	border-color: #2a363b;
}

/* ---------- Smaller screens ---------- */

@media (max-width: 1150px) {
	.twg-lp {
		--twg-gutter: 32px;
	}

	.twg-carousel {
		--twg-per: 3;
		--twg-gap: 20px;
	}

	.twg-lp .twg-cat-intro.e-con {
		gap: 48px !important;
	}
}

@media (max-width: 767px) {
	.twg-lp {
		--twg-gutter: 20px;
	}

	.twg-lp.twg-hero.e-con {
		display: block !important;
		min-height: 0 !important;
		padding: 250px var(--twg-gutter) 0 !important;
		background-size: auto 310px !important;
		background-position: center top !important;
		background-color: #fff !important;
	}

	.twg-lp .twg-hero-box.e-con {
		width: 100% !important;
		padding: 30px 22px 30px !important;
		box-shadow: none;
	}

	.twg-lp .twg-hero-box .twg-kicker .elementor-heading-title {
		font-size: 12px !important;
		margin-bottom: 14px !important;
	}

	.twg-lp .twg-hero-title .elementor-heading-title {
		font-size: 46px !important;
		margin-bottom: 14px !important;
	}

	.twg-lp .twg-hero-text p {
		font-size: 16px !important;
	}

	.twg-lp .twg-kicker .elementor-heading-title {
		font-size: 12px !important;
	}

	.twg-lp .twg-h2 .elementor-heading-title {
		font-size: 30px !important;
	}

	.twg-lp.twg-navwrap.e-con {
		padding-top: 40px !important;
		padding-bottom: 8px !important;
	}

	.twg-lp.twg-navwrap .twg-kicker .elementor-heading-title {
		margin-bottom: 10px !important;
	}

	.twg-lp.twg-navwrap .twg-h2 .elementor-heading-title {
		margin-bottom: 20px !important;
	}

	/* Phones: one column of compact tiles, photo on the left. */
	.twg-nav {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.twg-lp .twg-nav__tile {
		flex-direction: row;
		align-items: stretch;
	}

	.twg-nav__img {
		flex: 0 0 38%;
		aspect-ratio: auto;
		min-height: 96px;
	}

	.twg-nav__text {
		flex: 1 1 auto;
		gap: 2px 12px;
		padding: 14px 14px 14px 16px;
	}

	.twg-lp .twg-nav__name {
		font-size: 18px;
	}

	.twg-lp .twg-nav__line {
		font-size: 13px;
		line-height: 1.4;
	}

	.twg-nav__arrow {
		width: 36px;
		height: 36px;
		background-size: 16px;
	}

	.twg-lp.twg-cat.e-con {
		padding-top: 44px !important;
		padding-bottom: 44px !important;
		scroll-margin-top: 70px;
	}

	.twg-lp .twg-cat-intro.e-con,
	.twg-lp .twg-cat-intro--rev.e-con {
		grid-template-columns: 1fr;
		gap: 24px !important;
	}

	.twg-lp .twg-cat-intro--rev > .twg-cat-photo {
		order: 0;
	}

	.twg-lp .twg-cat-copy.e-con {
		max-width: none !important;
	}

	.twg-lp .twg-cat-copy .twg-kicker .elementor-heading-title {
		margin-bottom: 12px !important;
	}

	.twg-lp .twg-cat-copy .twg-h2 .elementor-heading-title {
		margin-bottom: 12px !important;
	}

	.twg-lp .twg-cat-text p {
		font-size: 15px !important;
	}

	.twg-lp .twg-cat-price p {
		margin-top: 10px !important;
		font-size: 15px !important;
	}

	.twg-lp .twg-cat-copy .twg-btn {
		margin-top: 18px !important;
	}

	.twg-lp .twg-btn .elementor-button {
		min-height: 49px;
		padding: 14px 20px !important;
		font-size: 14px !important;
	}

	.twg-lp.twg-box.twg-cat > .elementor-element.twg-cat-carousel {
		margin-top: 32px !important;
	}

	.twg-lp .twg-cat-copy .twg-h2 .elementor-heading-title {
		font-size: 39px !important;
	}

	/* One card and the edge of the next, swipe for more. */
	.twg-carousel {
		--twg-gap: 12px;
	}

	.twg-carousel__track {
		grid-auto-columns: 78%;
	}

	.twg-carousel__nav {
		margin-top: 18px;
	}

	.twg-carousel__btn {
		display: none;
	}

	.twg-card__body {
		padding: 16px 14px 14px;
	}

	.twg-carousel .twg-card__title {
		font-size: 17px !important;
	}

	.twg-carousel .twg-card__price {
		font-size: 18px !important;
	}
}

/* ---------- "Ship to multiple addresses" signpost ---------- */

.twg-ship {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 12px;
	margin: 22px 0 0;
	padding: 12px 16px;
	background: var(--twg-pale, #eff8fc);
	font-family: var(--twg-font);
	font-size: 15px;
	line-height: 1.45;
	text-align: left;
	color: var(--twg-ink, #111610);
}

.twg-lp .twg-ship p {
	margin: 0 !important;
	font-size: 15px;
	line-height: 1.45;
	color: var(--twg-ink, #111610);
}

.twg-lp .twg-ship strong {
	font-weight: 500;
}

.twg-ship::before {
	content: "";
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111610' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 4l9 6.5V20H3z'/%3E%3Cpath d='M9.5 20v-5h5v5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Hero breadcrumb (top left, as on Make It Personal) ---------- */

.twg-lp.twg-hero > .twg-crumb {
	position: absolute !important;
	top: 22px;
	left: max(var(--twg-gutter), calc((100% - 1280px) / 2));
	z-index: 2;
	width: auto !important;
	margin: 0 !important;
}

.twg-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 13px;
	margin: 0;
	padding: 6px 10px;
	background: rgba(255, 255, 255, 0.86);
	font-family: var(--twg-font);
	font-size: 14px;
	line-height: 1.4;
}

.twg-lp .twg-breadcrumb a,
.twg-lp .twg-breadcrumb span {
	color: #485761 !important;
	text-decoration: none !important;
	font-size: 14px;
}

.twg-lp .twg-breadcrumb a:hover {
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

.twg-lp .twg-breadcrumb span[aria-hidden] {
	color: #7c8f99 !important;
}

/* ---------- Section with a heading row (kicker + title, short aside on the right) ---------- */

.twg-lp.twg-sec.e-con {
	padding-top: 88px !important;
	padding-bottom: 88px !important;
	scroll-margin-top: 90px;
}

.twg-lp.twg-sec.e-con + .twg-lp.twg-sec.e-con {
	border-top: 1px solid var(--twg-line) !important;
}

.twg-lp .twg-sec-head.e-con {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-end !important;
	justify-content: space-between !important;
	gap: 30px !important;
	margin-bottom: 36px !important;
}

.twg-lp .twg-sec-head > .elementor-element {
	width: auto !important;
	flex: 0 1 auto !important;
}

.twg-lp .twg-sec-head .twg-kicker .elementor-heading-title {
	margin-bottom: 11px !important;
}

.twg-lp .twg-aside p {
	max-width: 420px;
	font-size: 16px !important;
	line-height: 1.55 !important;
	color: var(--twg-muted) !important;
	text-align: right;
	text-wrap: pretty;
}

/* ---------- Explore band ---------- */

.twg-lp.twg-band.e-con {
	padding-top: 46px !important;
	padding-bottom: 44px !important;
	background: var(--twg-pale) !important;
}

.twg-lp.twg-band .twg-kicker .elementor-heading-title {
	margin-bottom: 10px !important;
}

.twg-lp.twg-band .twg-h2 .elementor-heading-title {
	margin-bottom: 30px !important;
}

.twg-explore {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
}

.twg-lp .twg-explore a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 0 4px;
	border-top: 1px solid #cbd7dc;
	color: var(--twg-ink) !important;
	font-family: var(--twg-font);
	font-size: 17px;
	letter-spacing: -0.014em;
	text-decoration: none !important;
}

.twg-lp .twg-explore a::after {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111610' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.twg-lp .twg-explore a:hover > span {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.twg-lp .twg-explore small {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	letter-spacing: 0;
	color: var(--twg-muted);
}

/* ---------- Product grid (layout="grid"): a grid on larger screens, a swipe carousel on phones ---------- */

@media (min-width: 768px) {
	.twg-carousel--grid .twg-carousel__track {
		grid-auto-flow: row;
		grid-template-columns: repeat(var(--twg-cols, 3), minmax(0, 1fr));
		grid-auto-columns: auto;
		row-gap: 32px;
		overflow: visible;
		scroll-snap-type: none;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.twg-carousel--grid .twg-carousel__track {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Smaller screens for the new parts. */
@media (max-width: 1150px) {
	.twg-lp .twg-sec-head.e-con {
		gap: 20px !important;
	}
}

@media (max-width: 767px) {
	.twg-lp.twg-hero > .twg-crumb {
		top: 12px;
		left: var(--twg-gutter);
	}

	.twg-breadcrumb,
	.twg-lp .twg-breadcrumb a,
	.twg-lp .twg-breadcrumb span {
		font-size: 13px;
	}

	.twg-breadcrumb {
		gap: 10px;
	}

	.twg-lp.twg-sec.e-con {
		padding-top: 44px !important;
		padding-bottom: 44px !important;
		scroll-margin-top: 70px;
	}

	.twg-lp .twg-sec-head.e-con {
		display: block !important;
		margin-bottom: 22px !important;
	}

	.twg-lp .twg-sec-head .twg-kicker .elementor-heading-title {
		margin-bottom: 10px !important;
	}

	.twg-lp .twg-aside p {
		margin-top: 12px !important;
		max-width: none;
		font-size: 15px !important;
		text-align: left;
	}

	.twg-lp.twg-band.e-con {
		padding-top: 33px !important;
		padding-bottom: 33px !important;
	}

	.twg-lp.twg-band .twg-h2 .elementor-heading-title {
		margin-bottom: 20px !important;
	}

	.twg-explore {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.twg-lp .twg-explore a {
		padding-top: 16px;
		font-size: 16px;
	}

	.twg-lp .twg-explore small {
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.twg-carousel__track {
		scroll-behavior: auto;
	}

	.twg-card__image img,
	.twg-nav__img img,
	.twg-carousel__bar span {
		transition: none !important;
	}
}

/* ---------- 0.15.15 (Colin, 5 Oct 2026): the carousel product cards in the Black Tea category card style ----------
   No border at rest; photo flush on white; name light and large, description and format light and muted, price in bold;
   a full-width white "Shop now" button with a black border. On hover a thin light-grey line around the card and a gentle
   zoom on the photo; the hovered button gives its borders up to that line and fills the pale Twist blue when pointed at. */

.twg-card {
	border: 0;
	transition: box-shadow 0.2s ease;
}

.twg-card:hover,
.twg-card:focus-within {
	box-shadow: 0 0 0 1px #e4e4e4;
}

@media (min-resolution: 1.5dppx) {
	.twg-card:hover,
	.twg-card:focus-within {
		box-shadow: 0 0 0 0.5px #e4e4e4;
	}
}

.twg-card__image {
	background: #fff;
}

.twg-card__image img {
	transform-origin: center;
	transition: transform 0.45s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.twg-card:hover .twg-card__image img,
.twg-card:focus-within .twg-card__image img {
	transform: scale(1.05);
}

.twg-card__body {
	padding: 16px 16px 14px 20px;
}

.twg-carousel .twg-card__eyebrow {
	display: none;
}

.twg-carousel .twg-card__title {
	min-height: 0;
	font-size: 22px !important;
	font-weight: 300 !important;
	line-height: 1.2 !important;
}

.twg-carousel .twg-card__desc {
	margin: 6px 0 0 !important;
	font-size: 15px !important;
	font-weight: 300 !important;
	line-height: 1.4 !important;
}

.twg-card__foot {
	padding-top: 10px;
}

.twg-carousel .twg-card__format {
	font-size: 14px !important;
	font-weight: 300 !important;
}

.twg-carousel .twg-card__price {
	margin: 4px 0 0 !important; /* 0.15.16: the button now sits below the body, full width. */
	font-size: 15px !important;
	font-weight: 700 !important;
}

.twg-carousel .twg-card__price del {
	font-weight: 400 !important;
}

.twg-carousel .twg-card__button {
	margin-top: auto;
	justify-content: center;
	gap: 10px;
	min-height: 0;
	padding: 15px 14px;
	border: 1px solid var(--twg-ink);
	background: #fff;
	color: var(--twg-ink) !important;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	transition: background-color 0.15s, color 0.15s, border-color 0.2s ease;
}

.twg-carousel .twg-card__button::after {
	width: 16px;
	height: 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111610' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

.twg-card:hover .twg-card__button,
.twg-card:focus-within .twg-card__button {
	border-color: transparent;
}

.twg-carousel .twg-card__button:hover,
.twg-carousel .twg-card__button:focus-visible {
	background: #e3f1fb;
	border-color: transparent;
	color: var(--twg-ink) !important;
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	.twg-card,
	.twg-card__image img {
		transition: none;
	}

	.twg-card:hover .twg-card__image img {
		transform: none;
	}
}

@media (max-width: 767px) {
	.twg-card__body {
		padding: 12px 10px 10px 12px;
	}

	.twg-carousel .twg-card__title {
		font-size: 18px !important;
	}

	.twg-carousel .twg-card__button {
		padding: 12px 10px;
		font-size: 14px;
	}
}