/* Touchplanet — product section shortcodes: [key_features], [main_content], [faqs]
   Colours come from the Elementor kit globals, with hex fallbacks. */

/* ---------- Key features ---------- */
.tp-features {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 32px 24px;
}
.tp-features__item {
	flex: 0 1 calc((100% - 120px) / 6);
	min-width: 178px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
}
/* Circular icon with the orange circle behind it, offset left and slightly up, so
   it reads as a crescent down the left edge exactly like the Canva design. The
   artwork PNGs fill their square edge to edge, so the disc is a few pixels wider
   than the icon and shifted left: it clears the artwork on the left and tucks
   behind it on the right. */
.tp-features__icon {
	position: relative;
	width: 158px;
	height: 158px;
}
.tp-features__icon::before {
	content: "";
	position: absolute;
	inset: -3px;
	transform: translate(-7px, -2px);
	border-radius: 50%;
	background: var(--e-global-color-secondary, #FAA51C);
}
/* Elementor ships `.elementor img { border-radius: 0 }` and loads after this file,
   so the circle needs one more class to win */
.tp-features .tp-features__icon img {
	position: relative;
	display: block;
	width: 158px;
	height: 158px;
	border-radius: 50%;
	object-fit: cover;
}
.tp-features__label {
	color: var(--e-global-color-primary, #52338B);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
}
@media (max-width: 1024px) {
	.tp-features__item { flex-basis: calc((100% - 48px) / 3); }
}
@media (max-width: 1024px) {
	.tp-features__icon { width: 138px; height: 138px; }
	.tp-features__icon::before { inset: -3px; transform: translate(-6px, -2px); }
	.tp-features .tp-features__icon img { width: 138px; height: 138px; }
}
@media (max-width: 767px) {
	.tp-features__item { flex-basis: calc((100% - 24px) / 2); min-width: 0; }
	.tp-features__icon { width: 118px; height: 118px; }
	.tp-features__icon::before { inset: -2px; transform: translate(-6px, -2px); }
	.tp-features .tp-features__icon img { width: 118px; height: 118px; }
	.tp-features__label { font-size: 14px; }
}

/* ---------- Main content rows ---------- */
.tp-content {
	display: flex;
	flex-direction: column;
	gap: 56px;
	margin-top: 48px;
}
.tp-content__row {
	display: flex;
	align-items: center;
	gap: 48px;
}
.tp-content__row:nth-of-type(even) {
	flex-direction: row-reverse;
}
.tp-content__media {
	flex: 1 1 50%;
	min-width: 0;
}
.tp-content__media img {
	display: block;
	width: 100%;
	height: auto;
}
.tp-content__text {
	flex: 1 1 50%;
	min-width: 0;
}
.tp-content__row--no-media .tp-content__text {
	flex-basis: 100%;
}
/* the kit styles h3 with Title 3, so this needs to out-specify .elementor-kit-10 h3 */
.tp-content h3.tp-content__title {
	margin: 0 0 12px;
	color: var(--e-global-color-secondary, #FAA51C);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.25;
}
.tp-content__body {
	font-size: 16px;
	line-height: 1.6;
}
.tp-content__body p { margin: 0 0 12px; }
.tp-content__body p:last-child { margin-bottom: 0; }
@media (max-width: 767px) {
	.tp-content__row,
	.tp-content__row:nth-of-type(even) {
		flex-direction: column;
		gap: 20px;
	}
	.tp-content h3.tp-content__title { font-size: 22px; }
}

/* ---------- Frequently bought together ---------- */
/* The Woo upsells widget prints nothing when a product has no upsells, which would
   leave the heading stranded. No Elementor condition can test for upsells, so the
   section hides itself when the widget came back empty. */
.tp-upsells:not(:has(.products)) {
	display: none;
}

/* Card styling. The upsells widget has controls for the image, title, price and
   button, but none for the card itself, so the frame lives here. The long selector
   beats Elementor's own `.elementor-products-grid ul.products.elementor-grid li.product`,
   which zeroes the padding. */
.tp-upsells .up-sells ul.products.elementor-grid li.product {
	display: flex;
	flex-direction: column;
	padding: 24px;
	border: 4px solid var(--e-global-color-primary, #52338B);
	border-radius: 20px;
	background: #fff;
	text-align: left;
}
.tp-upsells .up-sells ul.products.elementor-grid li.product img {
	margin-bottom: 20px;
}
.tp-upsells .up-sells ul.products.elementor-grid li.product .woocommerce-loop-product__title {
	margin: 0 0 8px;
	color: var(--e-global-color-primary, #52338B);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}
.tp-upsells .up-sells ul.products.elementor-grid li.product .price {
	margin: 0 0 20px;
	color: var(--e-global-color-primary, #52338B);
	font-size: 16px;
	font-weight: 400;
}
.tp-upsells .up-sells ul.products.elementor-grid li.product .button {
	margin-top: auto;
	align-self: center;
}

/* ---------- FAQs ---------- */
.tp-faqs {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
/* matches the home page nested-accordion: purple closed, orange open, + / − icon */
.tp-faqs__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	list-style: none;
	cursor: pointer;
	padding: 16px 24px;
	border-radius: 30px;
	background: var(--e-global-color-primary, #52338B);
	color: #fff;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.35;
	transition: background-color 0.2s ease;
}
.tp-faqs__item[open] .tp-faqs__q {
	background: var(--e-global-color-secondary, #FAA51C);
}
.tp-faqs__q::-webkit-details-marker { display: none; }
.tp-faqs__q::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 24px;
	font-weight: 400;
	line-height: 1;
}
.tp-faqs__item[open] .tp-faqs__q::after { content: "\2212"; }
.tp-faqs__a {
	padding: 16px 28px 0;
	color: var(--e-global-color-primary, #52338B);
	font-size: 16px;
	line-height: 1.6;
}
.tp-faqs__a p { margin: 0 0 12px; }
.tp-faqs__a p:last-child { margin-bottom: 0; }
@media (max-width: 767px) {
	.tp-faqs__q { font-size: 15px; padding: 14px 20px; }
	.tp-faqs__a { padding: 12px 20px 0; }
}