/* =============================================================
   TOLO TRADING — Design System v2
   Brand palette (strict): red #ED3237 · blue #0059E2
   plus black/white/neutral grays only.
   All custom components are prefixed .tolo-
   ============================================================= */

:root {
	--tolo-red: #ED3237;
	--tolo-blue: #0059E2;
	/* shades = brand colors blended with black/white only */
	--tolo-blue-deep: #003D9B;
	--tolo-red-deep: #C2272B;
	--tolo-blue-tint: #EBF2FE;
	--tolo-red-tint: #FDEFEF;
	--tolo-ink: #101828;
	--tolo-body: #4A5568;
	--tolo-line: #E6EAF1;
	--tolo-bg-soft: #F7F9FC;
	--tolo-radius: 14px;
	--tolo-radius-sm: 10px;
	--tolo-shadow: 0 6px 24px rgba(16, 24, 40, 0.07);
	--tolo-shadow-hover: 0 18px 44px rgba(0, 89, 226, 0.16);
	--tolo-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* =============================================================
   1. GLOBAL — navigation, headings, shared atoms
   ============================================================= */

/* ---- ONE global content container: 92% wide, capped at Divi's
   1380px site width. Applies to every row — standard pages, Woo
   templates, Theme Builder header/body/footer — so all edges align. */
body #page-container .et_pb_row {
	width: 92% !important;
	max-width: 1380px !important;
}

.et-l--header .et_pb_menu .et-menu {
	flex-wrap: nowrap !important;
}
.et-l--header .et_pb_menu .et-menu > li > a {
	font-size: 17px !important;
	font-weight: 500 !important;
	color: var(--tolo-ink);
	white-space: nowrap;
	transition: color 0.2s var(--tolo-ease);
}
.et-l--header .et_pb_menu .et-menu > li > a:hover {
	color: var(--tolo-red);
	opacity: 1 !important;
}
/* keep the header on one line on narrower desktops/laptops */
@media (min-width: 981px) and (max-width: 1480px) {
	.et-l--header .et_pb_menu .et-menu > li > a {
		font-size: 16px !important;
	}
	.et-l--header .et_pb_menu .et-menu > li {
		padding-left: 4px;
		padding-right: 4px;
	}
	.et-l--header .et-menu > li {
		margin-left: 0 !important;
	}
}
/* top utility bar never wraps mid-link */
.et-l--header .et_pb_text_inner a {
	white-space: nowrap;
}
/* top bar: keep utility links + socials on one tidy line */
@media (min-width: 981px) {
	.et-l--header .et_pb_section:first-child .et_pb_text_inner {
		white-space: nowrap;
	}
	.et-l--header .et_pb_social_media_follow {
		display: inline-flex !important;
		flex-wrap: nowrap !important;
		white-space: nowrap;
	}
	.et-l--header .et_pb_social_media_follow li {
		float: none !important;
		display: inline-flex !important;
	}
}
@media (min-width: 981px) and (max-width: 1480px) {
	.et-l--header .et_pb_section:first-child .et_pb_text_inner,
	.et-l--header .et_pb_section:first-child a {
		font-size: 13.5px !important;
	}
}

/* global heading hierarchy — one ink color everywhere content
   modules don't explicitly brand them blue/white */
.et-l--body h1, .et-l--body h2, .et-l--body h3, .et-l--body h4,
#main-content h1, #main-content h2, #main-content h3, #main-content h4 {
	color: var(--tolo-ink);
}

/* desktop dropdowns — fixed width chain so nothing overflows */
@media (min-width: 981px) {
	.et-l--header .nav li ul {
		width: 250px !important;
		padding: 10px 0 !important;
		border: 1px solid var(--tolo-line);
		border-top: 3px solid var(--tolo-red);
		border-radius: 0 0 12px 12px;
		box-shadow: 0 18px 40px rgba(16, 24, 40, 0.14);
		background: #fff !important;
	}
	.et-l--header .nav li ul li {
		width: 100%;
	}
	.et-l--header .nav li ul a {
		width: auto !important;
		display: block;
		font-size: 15px !important;
		font-weight: 500 !important;
		color: var(--tolo-ink) !important;
		padding: 10px 20px !important;
		opacity: 1 !important;
		transition: background 0.18s var(--tolo-ease), color 0.18s var(--tolo-ease), padding-left 0.18s var(--tolo-ease);
	}
	.et-l--header .nav li ul a:hover {
		color: var(--tolo-blue) !important;
		background: var(--tolo-blue-tint);
		padding-left: 26px !important;
	}
	.et-l--header .nav li li:not(:last-child) a {
		border-bottom: 1px solid var(--tolo-bg-soft);
	}
}

/* mobile menu */
.et_mobile_menu {
	border-top: 3px solid var(--tolo-red) !important;
	border-radius: 0 0 12px 12px;
	box-shadow: 0 18px 40px rgba(16, 24, 40, 0.16);
	padding: 6px 0 10px !important;
}
/* accordion: submenus collapsed until toggled (tolo.js) */
.et_mobile_menu li.menu-item-has-children {
	position: relative;
}
/* Accordion is driven purely by the .tolo-open class via max-height —
   no inline JS styles, so a submenu can never get "stuck" visible. */
.et_mobile_menu li.menu-item-has-children > ul.sub-menu {
	display: block !important;
	visibility: visible !important;
	overflow: hidden !important;
	max-height: 0;
	opacity: 0;
	padding-left: 0 !important;
	transition: max-height 0.32s ease, opacity 0.25s ease;
}
.et_mobile_menu li.menu-item-has-children.tolo-open > ul.sub-menu {
	max-height: 1500px;
	opacity: 1;
}
/* Divi tries to hide the nested list items themselves */
.et_mobile_menu li.menu-item-has-children > ul.sub-menu > li {
	display: block !important;
	visibility: visible !important;
}
.et_mobile_menu li.menu-item-has-children > a {
	padding-right: 56px !important;
}
.tolo-submenu-toggle {
	position: absolute;
	top: 6px;
	right: 8px;
	width: 40px;
	height: 40px;
	background: var(--tolo-bg-soft);
	border: 1px solid var(--tolo-line);
	border-radius: 10px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
	transition: background 0.2s var(--tolo-ease), border-color 0.2s var(--tolo-ease);
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}
/* taps always land on the button, never the inner chevron */
.tolo-submenu-toggle .tolo-submenu-arrow { pointer-events: none; }
.tolo-submenu-toggle:hover,
li.tolo-open > .tolo-submenu-toggle {
	background: var(--tolo-blue-tint);
	border-color: rgba(0, 89, 226, 0.35);
}
.tolo-submenu-arrow {
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--tolo-blue);
	border-bottom: 2px solid var(--tolo-blue);
	transform: rotate(45deg) translate(-1px, -1px);
	transition: transform 0.25s var(--tolo-ease);
}
li.tolo-open > .tolo-submenu-toggle .tolo-submenu-arrow {
	transform: rotate(225deg) translate(-2px, -2px);
}
.et_mobile_menu li a {
	font-size: 16px !important;
	font-weight: 600 !important;
	color: var(--tolo-ink) !important;
	border-color: var(--tolo-bg-soft) !important;
	padding: 12px 5% !important;
}
.et_mobile_menu li li a {
	font-size: 14.5px !important;
	font-weight: 500 !important;
	padding-left: 10% !important;
}
.et_mobile_menu li a:hover {
	background: var(--tolo-blue-tint) !important;
	color: var(--tolo-blue) !important;
	opacity: 1 !important;
}

.tolo-eyebrow {
	color: var(--tolo-blue);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 14px;
}

/* WhatsApp availability tag shown under the phone number */
.tolo-wa {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--tolo-blue);
	background: var(--tolo-blue-tint);
	border-radius: 100px;
	padding: 2px 10px;
	margin-top: 5px;
	line-height: 1.5;
}
.tolo-wa .tolo-wa-ico {
	font-size: 13px;
	line-height: 1;
}

/* ---- unified design language across old + new sections ---- */

/* every Divi button becomes the brand pill with consistent motion */
body #page-container .et_pb_button {
	border-radius: 100px !important;
	font-weight: 600 !important;
	transition: transform 0.25s var(--tolo-ease), box-shadow 0.25s var(--tolo-ease), background 0.25s var(--tolo-ease), color 0.25s var(--tolo-ease), border-color 0.25s var(--tolo-ease) !important;
}
body #page-container .et_pb_button:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 89, 226, 0.22);
}

/* homepage category grid (catalog order) */
.tolo-cats-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
.tolo-cats-grid .dipl_woo_product_category {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	text-align: center;
	padding-bottom: 6px;
}
.tolo-cats-grid .dipl_woo_product_category_thumbnail img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background: #fff;
	padding: 12px;
	box-sizing: border-box;
}
.tolo-cats-grid .dipl_woo_product_category_name {
	font-size: 21px;
	font-weight: 700;
	margin: 4px 18px 0;
	padding-bottom: 16px;
}
.tolo-cats-grid .dipl_woo_product_category_name a {
	color: #101828 !important;
}
@media (max-width: 980px) {
	.tolo-cats-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 18px;
	}
}
@media (max-width: 540px) {
	.tolo-cats-grid .dipl_woo_product_category_name {
		font-size: 16px;
	}
}

/* homepage category cards join the same hover language */
#cat-row .dipl_woo_product_category {
	border: 1px solid var(--tolo-line);
	box-shadow: 0 2px 10px rgba(16, 24, 40, 0.05) !important;
	transition: transform 0.3s var(--tolo-ease), box-shadow 0.3s var(--tolo-ease), border-color 0.3s var(--tolo-ease) !important;
}
#cat-row .dipl_woo_product_category:hover {
	transform: translateY(-6px);
	box-shadow: var(--tolo-shadow-hover) !important;
	border-color: rgba(0, 89, 226, 0.35);
}

/* features strip cards share the exact same shadow + lift */
.fstrip-item {
	border: 1px solid var(--tolo-line) !important;
	box-shadow: 0 2px 10px rgba(16, 24, 40, 0.05) !important;
}
.fstrip-item:hover {
	transform: translateY(-6px) !important;
	box-shadow: var(--tolo-shadow-hover) !important;
}

/* breadcrumbs: consistent weight + brand link colors everywhere */
.et_pb_wc_breadcrumb,
.woocommerce-breadcrumb {
	font-weight: 600 !important;
	font-size: 14px !important;
}

/* consistent selection + focus states */
::selection {
	background: var(--tolo-blue);
	color: #fff;
}
a:focus-visible,
button:focus-visible,
.tolo-pack-pill:focus-visible,
.tolo-sort-select:focus-visible {
	outline: 3px solid rgba(0, 89, 226, 0.45) !important;
	outline-offset: 2px;
}

/* =============================================================
   2. HOMEPAGE — WHY CHOOSE US (3 × 2 cards)
   ============================================================= */

.tolo-why-row .et_pb_column {
	margin-bottom: 28px;
}

.tolo-why-card {
	background: #fff;
	border: 1px solid var(--tolo-line);
	border-radius: var(--tolo-radius);
	padding: 38px 30px 34px !important;
	height: 100%;
	position: relative;
	overflow: hidden;
	box-shadow: var(--tolo-shadow);
	transition: transform 0.3s var(--tolo-ease), box-shadow 0.3s var(--tolo-ease), border-color 0.3s var(--tolo-ease);
}
/* hover matches the product/category cards exactly: lift, border
   accent, deeper shadow — no gradient bars or extra effects */
.tolo-why-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--tolo-shadow-hover);
	border-color: rgba(0, 89, 226, 0.35);
}

.tolo-why-card .et_pb_main_blurb_image {
	margin-bottom: 22px !important;
}
.tolo-why-card .et_pb_main_blurb_image .et_pb_image_wrap {
	background: linear-gradient(135deg, var(--tolo-blue-tint) 0%, var(--tolo-red-tint) 100%);
	border: 1px solid var(--tolo-line);
	border-radius: 18px;
	padding: 18px;
	transition: transform 0.3s var(--tolo-ease);
}
.tolo-why-card:hover .et_pb_main_blurb_image .et_pb_image_wrap {
	transform: scale(1.08) rotate(-2deg);
}
.tolo-why-card .et_pb_module_header,
.tolo-why-card .et_pb_module_header span {
	color: var(--tolo-ink) !important;
	font-size: 19px !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
}
.tolo-why-card .et_pb_blurb_description {
	color: var(--tolo-body);
	font-size: 15px;
	line-height: 1.75;
	padding-top: 10px;
}

/* =============================================================
   3. HOMEPAGE — INDUSTRIES
   ============================================================= */

.tolo-ind-col {
	position: relative;
}
.tolo-ind-card {
	position: relative;
	border-radius: var(--tolo-radius);
	overflow: hidden;
	box-shadow: var(--tolo-shadow);
	transition: transform 0.3s var(--tolo-ease), box-shadow 0.3s var(--tolo-ease);
}
.tolo-ind-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--tolo-shadow-hover);
}
.tolo-ind-card .et_pb_image_wrap,
.tolo-ind-card img {
	display: block;
	width: 100%;
}
.tolo-ind-card img {
	transition: transform 0.6s var(--tolo-ease);
}
.tolo-ind-card:hover img {
	transform: scale(1.07);
}
.tolo-ind-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(16, 24, 40, 0) 45%, rgba(0, 30, 80, 0.85) 100%);
	pointer-events: none;
}
.tolo-ind-label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 14px;
	z-index: 2;
	text-align: center;
}
.tolo-ind-label p {
	color: #fff !important;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.3;
	padding-bottom: 0 !important;
	text-shadow: 0 1px 8px rgba(16, 24, 40, 0.5);
}

/* =============================================================
   4. HOMEPAGE — ABOUT IMAGE + IMPACT BAND
   ============================================================= */

.tolo-about-img {
	border-radius: var(--tolo-radius);
	overflow: hidden;
	box-shadow: var(--tolo-shadow-hover);
}
.tolo-about-img img {
	transition: transform 0.6s var(--tolo-ease);
}
.tolo-about-img:hover img {
	transform: scale(1.04);
}

/* impact band: brand-blue panel, white numbers, red tick accents */
.tolo-impact {
	background: linear-gradient(120deg, var(--tolo-blue-deep) 0%, var(--tolo-blue) 70%);
	border-radius: 20px;
	padding: 14px 28px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 24px 50px rgba(0, 89, 226, 0.28);
}
.tolo-impact::before,
.tolo-impact::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	pointer-events: none;
}
.tolo-impact::before {
	width: 280px;
	height: 280px;
	top: -140px;
	right: -80px;
}
.tolo-impact::after {
	width: 200px;
	height: 200px;
	bottom: -120px;
	left: -60px;
}
.tolo-impact-inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}
.tolo-impact-item {
	text-align: center;
	padding: 26px 12px;
	position: relative;
}
.tolo-impact-item:not(:last-child)::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 58px;
	background: rgba(255, 255, 255, 0.25);
}
.tolo-impact-value {
	display: block;
	color: #fff;
	font-family: Poppins, sans-serif;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
}
.tolo-impact-item .tolo-impact-label {
	display: inline-block;
	margin-top: 8px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 14.5px;
	font-weight: 500;
	position: relative;
	padding-top: 10px;
}
.tolo-impact-label::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 28px;
	height: 3px;
	border-radius: 3px;
	background: var(--tolo-red);
}

/* =============================================================
   5. SITE-WIDE — PARTNER CTA BAND (pre-footer)
   ============================================================= */

/* v2: centered pure CTA — footer below already carries the contact
   details, so the band focuses on action */
.tolo-partner2 {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}
.tolo-partner2 .tolo-partner-actions {
	justify-content: center;
}
.tolo-partner-note {
	color: rgba(255, 255, 255, 0.75);
	font-size: 14px;
	margin: 22px 0 0 !important;
	padding: 0 !important;
}
.tolo-partner-note .tolo-note-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #7DF29B;
	margin-right: 8px;
	vertical-align: middle;
}

/* light variant for in-page commitment bands (so they don't compete
   with the blue pre-footer CTA right below) */
.tolo-partner2.tolo-commit h2 {
	color: var(--tolo-ink) !important;
}
.tolo-partner2.tolo-commit .tolo-partner-text {
	color: var(--tolo-body);
}
.tolo-partner2.tolo-commit .tolo-partner-eyebrow {
	color: var(--tolo-blue);
	background: var(--tolo-blue-tint);
	border-color: rgba(0, 89, 226, 0.3);
}
.tolo-partner2.tolo-commit .tolo-btn-ghost {
	color: var(--tolo-blue) !important;
	border-color: rgba(0, 89, 226, 0.45);
}
.tolo-partner2.tolo-commit .tolo-btn-ghost:hover {
	background: var(--tolo-blue);
	color: #fff !important;
}

.tolo-partner {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 48px;
	align-items: center;
}
.tolo-partner-eyebrow {
	display: inline-block;
	color: #fff;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 100px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 6px 16px;
	margin-bottom: 18px;
}
.tolo-partner h2,
.tolo-partner2 h2 {
	color: #fff !important;
	font-family: Poppins, sans-serif;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 14px;
	padding: 0;
}
.tolo-partner-text {
	color: rgba(255, 255, 255, 0.88);
	font-size: 16px;
	line-height: 1.75;
	margin: 0 0 26px;
}
.tolo-partner-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}
.tolo-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border-radius: 100px;
	font-size: 16px;
	font-weight: 700;
	padding: 14px 30px;
	text-decoration: none !important;
	transition: transform 0.25s var(--tolo-ease), box-shadow 0.25s var(--tolo-ease), background 0.25s var(--tolo-ease), color 0.25s var(--tolo-ease);
}
.tolo-btn .tolo-vd-arrow {
	transition: transform 0.25s var(--tolo-ease);
}
.tolo-btn:hover .tolo-vd-arrow {
	transform: translateX(4px);
}
.tolo-btn-red {
	background: var(--tolo-red);
	color: #fff !important;
	box-shadow: 0 12px 26px rgba(0, 0, 0, 0.25);
}
.tolo-btn-red:hover {
	background: var(--tolo-red-deep);
	transform: translateY(-2px);
}
.tolo-btn-ghost {
	background: transparent;
	color: #fff !important;
	border: 2px solid rgba(255, 255, 255, 0.6);
}
.tolo-btn-ghost:hover {
	background: #fff;
	color: var(--tolo-blue) !important;
	transform: translateY(-2px);
}

.tolo-partner-contacts {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.tolo-contact-chip {
	display: flex;
	align-items: center;
	gap: 14px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--tolo-radius-sm);
	padding: 13px 18px;
	color: #fff !important;
	font-size: 15.5px;
	font-weight: 500;
	text-decoration: none !important;
	transition: background 0.22s var(--tolo-ease), transform 0.22s var(--tolo-ease), border-color 0.22s var(--tolo-ease);
}
.tolo-contact-chip:hover {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.45);
	transform: translateX(6px);
}
.tolo-contact-chip .tolo-chip-ico {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 50%;
	font-size: 16px;
	line-height: 1;
}

/* =============================================================
   6. CATALOG — ARCHIVE HERO
   ============================================================= */

.tolo-arch-hero .et_pb_post_title h1,
.tolo-arch-hero h1 {
	color: #fff !important;
}
.tolo-hero-trust .et_pb_main_blurb_image img {
	filter: brightness(0) invert(1);
	width: 30px !important;
	height: 30px !important;
	max-width: 30px !important;
	object-fit: contain;
}
.tolo-hero-trust .et_pb_main_blurb_image {
	line-height: 0;
}
.tolo-hero-trust .et_pb_blurb .et_pb_image_wrap {
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50% !important;
	width: 60px !important;
	height: 60px !important;
	box-sizing: border-box;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	overflow: hidden;
	transition: background 0.3s var(--tolo-ease), transform 0.3s var(--tolo-ease);
}
.tolo-hero-trust .et_pb_main_blurb_image img {
	margin: 0 auto;
	display: block;
}
.tolo-hero-trust .et_pb_blurb:hover .et_pb_image_wrap {
	background: rgba(255, 255, 255, 0.25);
	transform: translateY(-3px);
}
.tolo-hero-trust .et_pb_module_header,
.tolo-hero-trust .et_pb_module_header span {
	color: #fff !important;
	font-size: 15px !important;
	font-weight: 600 !important;
}
.tolo-hero-trust .et_pb_column:not(:last-child) {
	border-right: 1px solid rgba(255, 255, 255, 0.22);
}

/* =============================================================
   7. CATALOG — SIDEBAR
   ============================================================= */

.tolo-cats-card,
.tolo-side-card {
	background: #fff;
	border: 1px solid var(--tolo-line);
	border-radius: var(--tolo-radius);
	padding: 26px 22px;
	box-shadow: var(--tolo-shadow);
	margin-bottom: 24px;
}
.et_pb_blurb.tolo-side-card {
	padding-bottom: 92px !important;
	margin-bottom: 0 !important;
}

.tolo-cats-title {
	color: var(--tolo-ink);
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--tolo-line);
}
.tolo-cats-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.tolo-cats-item {
	margin: 0 0 4px !important;
	border-radius: var(--tolo-radius-sm);
	overflow: hidden;
}
.tolo-cats-item a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 12px;
	color: var(--tolo-ink) !important;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none !important;
	border-radius: var(--tolo-radius-sm);
	transition: background 0.25s var(--tolo-ease), color 0.25s var(--tolo-ease), padding-left 0.25s var(--tolo-ease);
}
.tolo-cats-item a:hover {
	background: var(--tolo-blue-tint);
	padding-left: 16px;
	color: var(--tolo-blue) !important;
}
.tolo-cats-item.is-active a {
	background: var(--tolo-blue);
	color: #fff !important;
}
.tolo-cats-item.is-active .tolo-cats-count {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
}
.tolo-cats-icon {
	width: 26px;
	height: 26px;
	object-fit: cover;
	border-radius: 6px;
	flex-shrink: 0;
}
.tolo-cats-name {
	flex: 1;
}
.tolo-cats-count {
	background: var(--tolo-bg-soft);
	color: var(--tolo-body);
	font-size: 12px;
	font-weight: 600;
	border-radius: 20px;
	padding: 2px 9px;
	line-height: 1.4;
}
.tolo-cats-chevron {
	color: currentColor;
	opacity: 0.55;
	font-size: 18px;
	line-height: 1;
}

/* sidebar buttons (Download Catalog / Contact Sales): icon sits
   inline and vertically centered with the label */
.tolo-arch-main .et_pb_column_1_4 .et_pb_button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	line-height: 1.4 !important;
}
.tolo-arch-main .et_pb_column_1_4 .et_pb_button:after {
	position: static !important;
	margin-left: 0 !important;
	line-height: 1 !important;
	opacity: 1 !important;
}

/* quote-only catalog: no price filter */
.wcapf-filter-price {
	display: none !important;
}

.wcapf-form {
	background: #fff;
	border: 1px solid var(--tolo-line);
	border-radius: var(--tolo-radius);
	padding: 26px 22px;
	box-shadow: var(--tolo-shadow);
	margin-bottom: 24px;
}
.wcapf-form h3,
.wcapf-form .wcapf-filter-title {
	color: var(--tolo-ink) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
}
.wcapf-form input[type="checkbox"],
.wcapf-form input[type="radio"] {
	accent-color: var(--tolo-blue);
}
.wcapf-form button[type="submit"],
.wcapf-form .wcapf-submit {
	background: var(--tolo-blue) !important;
	color: #fff !important;
	border-radius: var(--tolo-radius-sm) !important;
	font-weight: 600 !important;
	width: 100%;
	padding: 12px !important;
	transition: background 0.25s var(--tolo-ease);
}
.wcapf-form button[type="submit"]:hover {
	background: var(--tolo-blue-deep) !important;
}

/* =============================================================
   8. CATALOG — TOOLBAR + PREMIUM PRODUCT GRID
   ============================================================= */

.tolo-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	background: #fff;
	border: 1px solid var(--tolo-line);
	border-radius: var(--tolo-radius-sm);
	padding: 12px 18px;
	margin-bottom: 24px;
	box-shadow: var(--tolo-shadow);
}
.tolo-result-count {
	color: var(--tolo-body);
	font-size: 15px;
	margin: 0 !important;
	padding: 0 !important;
}
.tolo-result-count strong {
	color: var(--tolo-ink);
}
.tolo-sort {
	display: flex;
	align-items: center;
	gap: 10px;
}
.tolo-sort-label {
	color: var(--tolo-body);
	font-size: 14px;
	font-weight: 600;
}
.tolo-sort-select-wrap {
	position: relative;
}
.tolo-sort-select {
	-webkit-appearance: none;
	appearance: none;
	background: var(--tolo-bg-soft);
	border: 1.5px solid var(--tolo-line) !important;
	border-radius: var(--tolo-radius-sm);
	color: var(--tolo-ink);
	font-size: 14px;
	font-weight: 600;
	padding: 9px 38px 9px 14px !important;
	cursor: pointer;
	transition: border-color 0.2s var(--tolo-ease), box-shadow 0.2s var(--tolo-ease);
}
.tolo-sort-select:hover,
.tolo-sort-select:focus {
	border-color: var(--tolo-blue) !important;
	box-shadow: 0 0 0 3px rgba(0, 89, 226, 0.12);
	outline: none;
}
.tolo-sort-chevron {
	position: absolute;
	right: 14px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--tolo-blue);
	border-bottom: 2px solid var(--tolo-blue);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}

/* product cards — equal heights, uncropped contained images,
   responsive 4/3/2 columns */
.tolo-grid ul.products,
.woocommerce ul.products {
	display: flex !important;
	flex-wrap: wrap;
	gap: 28px;
	margin: 0 !important;
}
/* WooCommerce clearfix pseudo-elements become phantom flex items and
   steal a slot from the first row — flex needs no clearfix */
.tolo-grid ul.products::before,
.tolo-grid ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none !important;
	display: none !important;
}
.tolo-grid ul.products li.product,
.woocommerce ul.products li.product {
	display: flex !important;
	flex-direction: column;
	float: none !important;
	width: calc(25% - 22px) !important;
	margin: 0 !important;
	background: #fff;
	border: 1px solid var(--tolo-line) !important;
	border-radius: var(--tolo-radius) !important;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(16, 24, 40, 0.05);
	transition: transform 0.3s var(--tolo-ease), box-shadow 0.3s var(--tolo-ease), border-color 0.3s var(--tolo-ease);
	padding-bottom: 24px !important;
	text-align: center;
}
.tolo-grid ul.products li.product:hover,
.woocommerce ul.products li.product:hover {
	transform: translateY(-6px);
	box-shadow: var(--tolo-shadow-hover);
	border-color: rgba(0, 89, 226, 0.35) !important;
}

/* full image, never cropped: white stage with comfortable padding */
.tolo-grid li.product > a:first-of-type,
.woocommerce ul.products li.product > a:first-of-type {
	display: block;
	overflow: hidden;
	background: #fff;
	border-bottom: 1px solid var(--tolo-bg-soft);
}
.tolo-grid li.product img,
.woocommerce ul.products li.product img {
	width: 100% !important;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: 18px;
	box-sizing: border-box;
	transition: transform 0.5s var(--tolo-ease);
	margin-bottom: 0 !important;
}
.tolo-grid li.product:hover img,
.woocommerce ul.products li.product:hover img {
	transform: scale(1.06);
}

/* quote catalog: no star ratings in grid cards */
.tolo-grid ul.products .star-rating,
.woocommerce ul.products .star-rating {
	display: none !important;
}

/* card hierarchy: category eyebrow › title › CTA */
.tolo-card-cat {
	display: block;
	color: var(--tolo-red);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 16px 16px 0;
}
.tolo-grid li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	color: var(--tolo-ink) !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	line-height: 1.45 !important;
	padding: 6px 16px 8px !important;
	flex-grow: 1;
}

@media (max-width: 1280px) {
	.tolo-grid ul.products li.product,
	.woocommerce ul.products li.product {
		width: calc(33.333% - 20px) !important;
	}
}
@media (max-width: 980px) {
	.tolo-grid ul.products li.product,
	.woocommerce ul.products li.product {
		width: calc(50% - 15px) !important;
		margin-bottom: 0 !important;
	}
}
@media (max-width: 540px) {
	/* two cards per row on phones — faster product discovery */
	.tolo-grid ul.products,
	.woocommerce ul.products {
		gap: 14px;
	}
	.tolo-grid ul.products li.product,
	.woocommerce ul.products li.product {
		width: calc(50% - 8px) !important;
		margin-bottom: 0 !important;
		padding-bottom: 16px !important;
	}
	.tolo-grid li.product img,
	.woocommerce ul.products li.product img {
		padding: 10px;
	}
	.tolo-grid li.product .woocommerce-loop-product__title,
	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 14.5px !important;
		padding: 4px 10px 6px !important;
	}
	.tolo-card-cat {
		font-size: 10.5px;
		padding: 12px 10px 0;
	}
	.button.tolo-view-details {
		font-size: 13px !important;
		padding: 8px 16px !important;
	}
}

/* archive pagination — pill buttons */
.tolo-grid .woocommerce-pagination ul.page-numbers,
.woocommerce nav.woocommerce-pagination ul {
	border: none !important;
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 10px;
}
.tolo-grid .page-numbers li .page-numbers,
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	border: 1.5px solid var(--tolo-line) !important;
	border-radius: 100px !important;
	background: #fff;
	color: var(--tolo-ink) !important;
	font-weight: 600 !important;
	transition: all 0.2s var(--tolo-ease);
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
	background: var(--tolo-blue) !important;
	border-color: var(--tolo-blue) !important;
	color: #fff !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--tolo-blue) !important;
	border-color: var(--tolo-blue) !important;
	color: #fff !important;
}

.button.tolo-view-details {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	align-self: center;
	background: #fff !important;
	color: var(--tolo-blue) !important;
	border: 1.5px solid rgba(0, 89, 226, 0.45) !important;
	border-radius: 100px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	padding: 10px 26px !important;
	margin: 10px auto 0 !important;
	line-height: 1.4 !important;
	transition: background 0.25s var(--tolo-ease), color 0.25s var(--tolo-ease), border-color 0.25s var(--tolo-ease), box-shadow 0.25s var(--tolo-ease);
}
.button.tolo-view-details .tolo-vd-arrow {
	transition: transform 0.25s var(--tolo-ease);
}
/* Divi injects its own icon pseudo-elements on .button — disable so
   our inline arrow is the only icon */
.button.tolo-view-details::before,
.button.tolo-view-details::after {
	content: none !important;
	display: none !important;
}

/* our toolbar replaces WooCommerce's native count + ordering row */
.tolo-grid .woocommerce-result-count,
.tolo-grid .woocommerce-ordering,
.et-tb-has-body .woocommerce-result-count,
.et-tb-has-body select.orderby {
	display: none !important;
}
/* high-specificity hover so theme button styles can never turn the
   label red/unreadable: solid blue fill, white text — always.
   Mirrors Divi's generated selector chain so it wins every tie. */
.et-db #et-boc .et-l .et_pb_module.et_pb_shop.tolo-grid .woocommerce ul.products li.product .button.tolo-view-details:hover,
body #page-container .et_pb_module.et_pb_shop.tolo-grid .woocommerce ul.products li.product .button.tolo-view-details:hover,
.woocommerce ul.products li.product .button.tolo-view-details:hover,
.tolo-grid li.product .button.tolo-view-details:hover,
body #page-container .button.tolo-view-details:hover,
.button.tolo-view-details:hover {
	background: var(--tolo-blue) !important;
	color: #fff !important;
	border-color: var(--tolo-blue) !important;
	box-shadow: 0 10px 22px rgba(0, 89, 226, 0.3);
}
.et-db #et-boc .et-l .et_pb_module.et_pb_shop.tolo-grid .woocommerce ul.products li.product .button.tolo-view-details:hover .tolo-vd-arrow,
.button.tolo-view-details:hover .tolo-vd-arrow {
	color: #fff !important;
}
.button.tolo-view-details:hover .tolo-vd-arrow {
	transform: translateX(4px);
}

/* =============================================================
   9. SINGLE PRODUCT
   ============================================================= */

/* tighter rhythm at the top of the page */
.single-product .et-l--body .et_pb_section:first-child {
	padding-top: 12px !important;
	padding-bottom: 0 !important;
}

/* gallery: premium white stage with depth, full uncropped image */
.single-product .cwg-gallery {
	background: #fff;
	border: 1px solid var(--tolo-line);
	border-radius: var(--tolo-radius);
	box-shadow: var(--tolo-shadow);
	padding: 18px;
}
.single-product .cwg-main {
	background: #fff;
	border-radius: var(--tolo-radius-sm);
	min-height: 520px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.single-product .cwg-main img,
.single-product .cwg-main-img {
	max-height: 540px;
	width: auto !important;
	max-width: 100%;
	object-fit: contain;
	margin: 0 auto;
}
.single-product .cwg-thumb-item {
	border-radius: var(--tolo-radius-sm) !important;
	border: 1.5px solid var(--tolo-line) !important;
	overflow: hidden;
	background: #fff;
	transition: border-color 0.2s var(--tolo-ease), transform 0.2s var(--tolo-ease);
}
.single-product .cwg-thumb-item:hover {
	transform: translateY(-2px);
}
.single-product .cwg-thumb-item.active {
	border-color: var(--tolo-red) !important;
	box-shadow: 0 0 0 1px var(--tolo-red);
}
.single-product .cwg-gallery button,
.single-product .cwg-prev,
.single-product .cwg-next,
.single-product .cwg-zoom-btn,
.single-product .cwg-thumb-nav {
	background: #fff !important;
	border: 1.5px solid var(--tolo-line) !important;
	color: var(--tolo-blue) !important;
	box-shadow: 0 6px 18px rgba(16, 24, 40, 0.12) !important;
	transition: background 0.2s var(--tolo-ease), color 0.2s var(--tolo-ease), border-color 0.2s var(--tolo-ease);
}
.single-product .cwg-gallery button:hover,
.single-product .cwg-prev:hover,
.single-product .cwg-next:hover,
.single-product .cwg-zoom-btn:hover {
	background: var(--tolo-blue) !important;
	color: #fff !important;
	border-color: var(--tolo-blue) !important;
}
.single-product .cwg-dots .cwg-dot {
	background: var(--tolo-line);
}
.single-product .cwg-dots .cwg-dot.active {
	background: var(--tolo-blue);
}

/* lightbox: always above the header, immersive backdrop.
   Base visibility stays under the gallery plugin's control — these
   styles only shape the OPEN state. */
.cwg-lightbox {
	position: fixed !important;
	inset: 0 !important;
	z-index: 2147483000 !important;
	background: rgba(6, 10, 18, 0.93) !important;
	backdrop-filter: blur(4px);
}
.cwg-lightbox.open {
	display: flex !important;
	align-items: center;
	justify-content: center;
}
.cwg-lightbox .cwg-lb-inner {
	max-width: min(1100px, 92vw);
	max-height: 88vh;
}
.cwg-lightbox .cwg-lb-img {
	max-height: 82vh !important;
	max-width: 100% !important;
	object-fit: contain;
	border-radius: var(--tolo-radius);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
	background: #fff;
}
.cwg-lightbox .cwg-lb-close,
.cwg-lightbox .cwg-lb-prev,
.cwg-lightbox .cwg-lb-next {
	background: rgba(255, 255, 255, 0.12) !important;
	border: 1px solid rgba(255, 255, 255, 0.35) !important;
	color: #fff !important;
	border-radius: 50% !important;
	width: 48px;
	height: 48px;
	transition: background 0.2s var(--tolo-ease);
	z-index: 2147483001 !important;
}
.cwg-lightbox .cwg-lb-close:hover,
.cwg-lightbox .cwg-lb-prev:hover,
.cwg-lightbox .cwg-lb-next:hover {
	background: var(--tolo-red) !important;
	border-color: var(--tolo-red) !important;
}
.cwg-lightbox .cwg-lb-counter {
	color: rgba(255, 255, 255, 0.8);
	font-weight: 600;
}

/* Single-product KEY FEATURES grid — rendered by [tolo_key_features] from
   the per-product repeater (Product data -> Key Features). Base layout used
   to live in the Divi row's custom CSS; it moved here when the block became
   dynamic, so the card count is free to vary per product. auto-fit keeps
   4 features 4-up (unchanged) and lets 5+ wrap onto a tidy second row. */
.features-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 16px;
	width: 100%;
	box-sizing: border-box;
}
.feature-card {
	background: #ffffff;
	border: 1px solid #e8ecef;
	border-radius: 12px;
	padding: 30px 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	box-sizing: border-box;
}
.feature-icon-circle {
	width: 45px;
	height: 45px;
	background-color: #f6f7f9;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}
.feature-icon-circle img {
	width: 64px;
	height: 64px;
	max-width: none;
	object-fit: contain;
}
.feature-title {
	font-size: 14px;
	font-weight: 700;
	color: #101828;
	line-height: 1.4;
	margin: 0;
}

.feature-card {
	border-radius: var(--tolo-radius-sm) !important;
	transition: transform 0.25s var(--tolo-ease), box-shadow 0.25s var(--tolo-ease), border-color 0.25s var(--tolo-ease);
}
.feature-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--tolo-shadow);
	border-color: rgba(237, 50, 55, 0.35) !important;
}

.tolo-pack {
	margin: 6px 0 10px;
}
.tolo-pack-label {
	color: var(--tolo-ink);
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 10px;
	display: block;
}
.tolo-pack-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 14px;
}
.tolo-pack-pill {
	background: #fff;
	border: 1.5px solid var(--tolo-line);
	border-radius: 100px;
	color: var(--tolo-ink);
	font-size: 14px;
	font-weight: 600;
	padding: 9px 20px;
	cursor: pointer;
	transition: all 0.2s var(--tolo-ease);
}
.tolo-pack-pill:hover {
	border-color: var(--tolo-blue);
	color: var(--tolo-blue);
}
.tolo-pack-pill.is-selected {
	border-color: var(--tolo-red);
	color: #fff;
	background: var(--tolo-red);
	box-shadow: 0 8px 18px rgba(237, 50, 55, 0.3);
}

/* tabs */
.et_pb_wc_tabs .et_pb_tabs_controls li {
	background: var(--tolo-bg-soft);
	border-radius: 10px 10px 0 0;
}
.et_pb_wc_tabs .et_pb_tabs_controls li a {
	color: var(--tolo-body) !important;
	font-weight: 600 !important;
}
.et_pb_wc_tabs .et_pb_tabs_controls li.et_pb_tab_active {
	background: #fff;
	box-shadow: inset 0 3px 0 var(--tolo-red);
}
.et_pb_wc_tabs .et_pb_tabs_controls li.et_pb_tab_active a {
	color: var(--tolo-ink) !important;
}

/* auto-fit so a tab with two filled blocks fills the row instead of
   leaving a dead third column */
.tolo-tab-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
}
.tolo-tab-block ul {
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--tolo-body);
	font-size: 14.5px;
	line-height: 1.7;
}
.tolo-tab-block li {
	position: relative;
	padding-left: 18px;
}
.tolo-tab-block li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--tolo-red);
}
.tolo-tab-block p + ul,
.tolo-tab-block ul + p {
	margin-top: 10px;
}
.tolo-tab-block {
	background: var(--tolo-bg-soft);
	border: 1px solid var(--tolo-line);
	border-radius: var(--tolo-radius-sm);
	padding: 22px;
}
.tolo-tab-block h4 {
	color: var(--tolo-ink);
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 8px;
	padding: 0;
}
.tolo-tab-block p {
	color: var(--tolo-body);
	font-size: 14.5px;
	line-height: 1.7;
	margin: 0;
	padding: 0;
}

/* related products — premium cards matching the catalog grid */
.tolo-rel-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
}
.tolo-rel-card {
	display: flex;
	flex-direction: column;
	position: relative;
	background: #fff;
	border: 1px solid var(--tolo-line);
	border-radius: var(--tolo-radius);
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(16, 24, 40, 0.05);
	text-decoration: none !important;
	transition: transform 0.3s var(--tolo-ease), box-shadow 0.3s var(--tolo-ease), border-color 0.3s var(--tolo-ease);
}
.tolo-rel-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--tolo-shadow-hover);
	border-color: rgba(0, 89, 226, 0.35);
}
.tolo-rel-media {
	display: block;
	overflow: hidden;
	background: #fff;
	border-bottom: 1px solid var(--tolo-bg-soft);
}
.tolo-rel-media img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: contain;
	padding: 18px;
	box-sizing: border-box;
	transition: transform 0.5s var(--tolo-ease);
}
.tolo-rel-card:hover .tolo-rel-media img {
	transform: scale(1.07);
}
.tolo-rel-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 18px 18px 24px;
	text-align: center;
	gap: 7px;
}
.tolo-rel-cat {
	color: var(--tolo-red);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.tolo-rel-title {
	color: var(--tolo-ink);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	flex: 1;
}
/* CTA styled as the standard outline pill */
.tolo-rel-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	align-self: center;
	color: var(--tolo-blue);
	border: 1.5px solid rgba(0, 89, 226, 0.45);
	border-radius: 100px;
	font-size: 14px;
	font-weight: 600;
	padding: 9px 24px;
	margin-top: 8px;
	transition: background 0.25s var(--tolo-ease), color 0.25s var(--tolo-ease), border-color 0.25s var(--tolo-ease);
}
.tolo-rel-card:hover .tolo-rel-cta {
	background: var(--tolo-blue);
	color: #fff;
	border-color: var(--tolo-blue);
}
.tolo-rel-cta .tolo-vd-arrow {
	transition: transform 0.25s var(--tolo-ease);
}
.tolo-rel-card:hover .tolo-rel-cta .tolo-vd-arrow {
	transform: translateX(4px);
}

/* =============================================================
   10. RESOURCES PAGE
   ============================================================= */

.tolo-step-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	counter-reset: tolo-step;
}
.tolo-step {
	background: #fff;
	border: 1px solid var(--tolo-line);
	border-radius: var(--tolo-radius);
	padding: 30px 24px 26px;
	position: relative;
	box-shadow: var(--tolo-shadow);
	transition: transform 0.3s var(--tolo-ease), box-shadow 0.3s var(--tolo-ease);
}
.tolo-step:hover {
	transform: translateY(-6px);
	box-shadow: var(--tolo-shadow-hover);
}
.tolo-step::before {
	counter-increment: tolo-step;
	content: "0" counter(tolo-step);
	display: inline-block;
	font-family: Poppins, sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	/* brand blue depth (was a red->blue gradient whose midpoint read purple) */
	background: linear-gradient(135deg, var(--tolo-blue) 0%, var(--tolo-blue-deep) 100%);
	border-radius: 10px;
	padding: 8px 13px;
	margin-bottom: 16px;
}
.tolo-step h3 {
	color: var(--tolo-ink);
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 8px;
	padding: 0;
}
.tolo-step p {
	color: var(--tolo-body);
	font-size: 14.5px;
	line-height: 1.7;
	margin: 0;
	padding: 0;
}

/* =============================================================
   ABOUT — OUR STORY (fully scoped to .tolo-story)
   Copy this whole block to the live site as-is; nothing here
   touches any element outside the .tolo-story section.
   ============================================================= */

.tolo-story .tolo-story-body p {
	color: #4A5568;
	font-size: 16px;
	line-height: 1.85;
	padding-bottom: 18px;
}

/* pull-quote card */
.tolo-story .tolo-story-quote {
	position: relative;
	background: #F7F9FC;
	border: 1px solid #E6EAF1;
	border-left: 4px solid #ED3237;
	border-radius: 12px;
	padding: 22px 24px 22px 56px;
	margin: 6px 0 24px;
}
.tolo-story .tolo-story-quote::before {
	content: "\201C";
	position: absolute;
	left: 18px;
	top: 10px;
	font-family: Georgia, serif;
	font-size: 52px;
	line-height: 1;
	color: #0059E2;
}
.tolo-story .tolo-story-quote p {
	color: #101828 !important;
	font-size: 17px !important;
	font-weight: 600;
	line-height: 1.65 !important;
	font-style: italic;
	margin: 0;
	padding: 0 !important;
}

/* fact chips */
.tolo-story .tolo-story-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 6px;
}
/* chips when authored as a native (editable) Divi Text module:
   the flex layout lives on the module's inner wrapper */
.tolo-story .tolo-story-chips.et_pb_text .et_pb_text_inner {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 6px;
}
.tolo-story .tolo-story-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1.5px solid #E6EAF1;
	border-radius: 100px;
	color: #101828;
	font-size: 13.5px;
	font-weight: 600;
	padding: 8px 16px;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.tolo-story .tolo-story-chip:hover {
	border-color: rgba(0, 89, 226, 0.4);
	box-shadow: 0 6px 18px rgba(16, 24, 40, 0.08);
	transform: translateY(-2px);
}
.tolo-story .tolo-story-chip .tolo-story-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #0059E2;
	flex-shrink: 0;
}

/* ---- image collage ---- */
.tolo-story .tolo-story-collage {
	position: relative;
	padding: 0 26px 56px 0;
}
/* main image — supports a raw <img> OR a native Divi Image module
   (.tolo-story-main-img) so the photo is swappable from the admin */
.tolo-story .tolo-story-main-img {
	position: relative;
	z-index: 1;
	margin: 0 !important;
	width: 100%;
}
.tolo-story .tolo-story-main,
.tolo-story .tolo-story-main-img img {
	display: block;
	width: 100%;
	max-height: 640px;
	object-fit: cover;
	object-position: center 35%;
	border-radius: 20px;
	box-shadow: 0 24px 56px rgba(16, 24, 40, 0.18);
	position: relative;
	z-index: 1;
}
.tolo-story .tolo-story-overlay {
	aspect-ratio: 4 / 5;
	object-fit: cover;
}
.tolo-story .tolo-story-overlay-img img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 16px;
	border: 6px solid #fff;
	box-shadow: 0 18px 40px rgba(16, 24, 40, 0.22);
}
/* decorative dotted brand frame behind the main image */
.tolo-story .tolo-story-collage::before {
	content: "";
	position: absolute;
	top: 26px;
	right: 0;
	width: 58%;
	height: 62%;
	border: 2px dashed rgba(0, 89, 226, 0.35);
	border-radius: 20px;
	z-index: 0;
}
.tolo-story .tolo-story-overlay,
.tolo-story .tolo-story-overlay-img {
	position: absolute;
	left: -8%;
	bottom: 0;
	width: 46%;
	border-radius: 16px;
	z-index: 2;
	margin: 0 !important;
	transition: transform 0.35s ease;
}
.tolo-story .tolo-story-overlay {
	border: 6px solid #fff;
	box-shadow: 0 18px 40px rgba(16, 24, 40, 0.22);
}
.tolo-story .tolo-story-collage:hover .tolo-story-overlay,
.tolo-story .tolo-story-collage:hover .tolo-story-overlay-img {
	transform: translateY(-6px);
}
.tolo-story .tolo-story-badge {
	position: absolute;
	top: 6%;
	right: -2px;
	z-index: 3;
	background: linear-gradient(120deg, #003D9B 0%, #0059E2 75%);
	color: #fff;
	border-radius: 16px;
	padding: 16px 22px;
	text-align: center;
	box-shadow: 0 16px 36px rgba(0, 89, 226, 0.35);
}
.tolo-story .tolo-story-badge strong {
	display: block;
	font-family: Poppins, sans-serif;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.1;
}
.tolo-story .tolo-story-badge span {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.85;
	margin-top: 4px;
}
.tolo-story .tolo-story-badge .tolo-story-badge-bar {
	width: 30px;
	height: 3px;
	border-radius: 3px;
	background: #ED3237;
	margin: 8px auto 0;
}

@media (max-width: 980px) {
	.tolo-story .tolo-story-collage {
		margin-top: 26px;
		padding: 0 12px 44px 0;
	}
}
@media (max-width: 767px) {
	.tolo-story .tolo-story-quote {
		padding: 18px 18px 18px 48px;
	}
	.tolo-story .tolo-story-overlay,
	.tolo-story .tolo-story-overlay-img {
		left: 0;
	}
	.tolo-story .tolo-story-badge {
		padding: 12px 16px;
	}
	.tolo-story .tolo-story-badge strong {
		font-size: 21px;
	}
}

/* About page — team cards */
.tolo-team-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
.tolo-team-card {
	background: #fff;
	border: 1px solid var(--tolo-line);
	border-radius: var(--tolo-radius);
	padding: 34px 28px 30px;
	text-align: center;
	box-shadow: var(--tolo-shadow);
	transition: transform 0.3s var(--tolo-ease), box-shadow 0.3s var(--tolo-ease), border-color 0.3s var(--tolo-ease);
}
.tolo-team-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--tolo-shadow-hover);
	border-color: rgba(0, 89, 226, 0.35);
}
.tolo-team-avatar {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--tolo-blue) 0%, var(--tolo-blue-deep) 100%);
	color: #fff;
	font-family: Poppins, sans-serif;
	font-size: 26px;
	font-weight: 700;
	margin-bottom: 18px;
	box-shadow: 0 12px 26px rgba(0, 89, 226, 0.3);
}
.tolo-team-card h3 {
	color: var(--tolo-ink);
	font-size: 19px;
	font-weight: 700;
	margin: 0 0 4px;
	padding: 0;
}
.tolo-team-role {
	display: block;
	color: var(--tolo-red);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 14px;
}
.tolo-team-card p {
	color: var(--tolo-body);
	font-size: 14.5px;
	line-height: 1.75;
	margin: 0;
	padding: 0;
}
@media (max-width: 980px) {
	.tolo-team-grid {
		grid-template-columns: 1fr;
		max-width: 480px;
		margin: 0 auto;
	}
}

/* About — Team as native Divi Person modules (name/role/bio/photo are
   all fully editable from the admin). Styled to match the card system. */
.tolo-person.et_pb_team_member {
	background: #fff;
	border: 1px solid var(--tolo-line);
	border-radius: var(--tolo-radius);
	padding: 34px 28px 30px;
	text-align: center;
	box-shadow: var(--tolo-shadow);
	transition: transform 0.3s var(--tolo-ease), box-shadow 0.3s var(--tolo-ease), border-color 0.3s var(--tolo-ease);
}
.tolo-person.et_pb_team_member:hover {
	transform: translateY(-6px);
	box-shadow: var(--tolo-shadow-hover);
	border-color: rgba(0, 89, 226, 0.35);
}
.tolo-person .et_pb_team_member_image {
	margin: 0 auto 18px;
	max-width: 100px;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 12px 26px rgba(0, 89, 226, 0.22);
}
.tolo-person .et_pb_team_member_image img {
	border-radius: 50%;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.tolo-person h4.et_pb_team_member_name {
	color: var(--tolo-ink) !important;
	font-size: 19px;
	font-weight: 700;
	margin: 0 0 4px;
	padding: 0;
}
.tolo-person .et_pb_member_position {
	color: var(--tolo-red);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 14px;
	display: block;
}
.tolo-person .et_pb_team_member_description p {
	color: var(--tolo-body);
	font-size: 14.5px;
	line-height: 1.75;
}
.tolo-person .et_pb_team_member_social_links {
	display: none;
}

.tolo-doc-card {
	display: flex;
	align-items: center;
	gap: 18px;
	background: #fff;
	border: 1px solid var(--tolo-line);
	border-radius: var(--tolo-radius);
	padding: 22px;
	box-shadow: var(--tolo-shadow);
	text-decoration: none !important;
	transition: transform 0.3s var(--tolo-ease), box-shadow 0.3s var(--tolo-ease), border-color 0.3s var(--tolo-ease);
}
.tolo-doc-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--tolo-shadow-hover);
	border-color: rgba(0, 89, 226, 0.35);
}
.tolo-doc-ico {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--tolo-blue-tint);
	border-radius: 14px;
	font-size: 22px;
}
.tolo-doc-card h3 {
	color: var(--tolo-ink);
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 4px;
	padding: 0;
}
.tolo-doc-card p {
	color: var(--tolo-body);
	font-size: 13.5px;
	line-height: 1.6;
	margin: 0;
	padding: 0;
}

/* =============================================================
   11. REQUEST ORDER FORM
   ============================================================= */

.quote-form .section-title {
	color: var(--tolo-ink) !important;
	font-size: 21px !important;
	font-weight: 700 !important;
	margin: 28px 0 4px !important;
	padding-bottom: 10px !important;
	position: relative;
}
.quote-form .section-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 46px;
	height: 3px;
	background: var(--tolo-red);
	border-radius: 3px;
}
.quote-form input[type="text"],
.quote-form input[type="email"],
.quote-form input[type="tel"],
.quote-form input[type="number"],
.quote-form select,
.quote-form textarea {
	border: 1.5px solid var(--tolo-line) !important;
	border-radius: var(--tolo-radius-sm) !important;
	padding: 11px 14px !important;
	transition: border-color 0.2s var(--tolo-ease), box-shadow 0.2s var(--tolo-ease);
}
.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {
	border-color: var(--tolo-blue) !important;
	box-shadow: 0 0 0 3px rgba(0, 89, 226, 0.12) !important;
	outline: none !important;
}
.quote-form .wpforms-field-repeater > .wpforms-field-repeater-display-rows {
	background: #fff;
	border: 1px solid var(--tolo-line);
	border-radius: var(--tolo-radius-sm);
	padding: 10px 14px;
	margin-bottom: 10px;
	transition: border-color 0.2s var(--tolo-ease), box-shadow 0.2s var(--tolo-ease);
}
.quote-form .wpforms-field-repeater > .wpforms-field-repeater-display-rows:hover {
	border-color: rgba(0, 89, 226, 0.35);
	box-shadow: var(--tolo-shadow);
}
.quote-form .wpforms-field-repeater-display-rows-buttons button {
	border-radius: var(--tolo-radius-sm) !important;
	font-weight: 600 !important;
}
/* smart phone field: room for the intl flag dropdown */
.quote-form .iti {
	width: 100%;
}
.quote-form .iti input[type="tel"],
.quote-form input.wpforms-smart-phone-field {
	padding-left: 62px !important;
}
.quote-form .iti__flag-container {
	padding: 0 4px 0 8px;
}

/* modern (searchable) select — match the design system */
.quote-form .choices__inner {
	background: #fff !important;
	border: 1.5px solid var(--tolo-line) !important;
	border-radius: var(--tolo-radius-sm) !important;
	padding: 7px 12px !important;
	min-height: 46px;
	transition: border-color 0.2s var(--tolo-ease), box-shadow 0.2s var(--tolo-ease);
}
.quote-form .choices.is-focused .choices__inner,
.quote-form .choices.is-open .choices__inner {
	border-color: var(--tolo-blue) !important;
	box-shadow: 0 0 0 3px rgba(0, 89, 226, 0.12) !important;
}
.quote-form .choices__list--dropdown,
.quote-form .choices__list[aria-expanded] {
	border: 1px solid var(--tolo-line) !important;
	border-radius: var(--tolo-radius-sm) !important;
	box-shadow: 0 18px 40px rgba(16, 24, 40, 0.14) !important;
	z-index: 50;
}
.quote-form .choices__list--dropdown .choices__item--selectable.is-highlighted,
.quote-form .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
	background: var(--tolo-blue-tint) !important;
	color: var(--tolo-blue) !important;
}
.quote-form .choices__input {
	background: var(--tolo-bg-soft) !important;
	border-radius: 8px !important;
	margin-bottom: 6px !important;
	padding: 8px 12px !important;
}

.quote-form .brf-submit-btn,
.quote-form button[type="submit"] {
	background: var(--tolo-red) !important;
	border: none !important;
	border-radius: 100px !important;
	color: #fff !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	padding: 15px 44px !important;
	transition: background 0.25s var(--tolo-ease), transform 0.25s var(--tolo-ease), box-shadow 0.25s var(--tolo-ease) !important;
}
.quote-form .brf-submit-btn:hover,
.quote-form button[type="submit"]:hover {
	background: var(--tolo-blue) !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 89, 226, 0.3);
}

/* =============================================================
   12. RESPONSIVE
   ============================================================= */

@media (max-width: 1100px) {
	.tolo-rel-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.tolo-step-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 980px) {
	/* trust strip steals too much vertical space before the grid */
	.tolo-hero-trust {
		display: none !important;
	}
	/* mobile priority: banner -> product grid -> categories/filters */
	.tolo-arch-main {
		display: flex !important;
		flex-direction: column;
	}
	.tolo-arch-main > .et_pb_column.et_pb_column_1_4 {
		order: 2;
	}
	.tolo-arch-main > .et_pb_column.et_pb_specialty_column,
	.tolo-arch-main > .et_pb_column.et_pb_column_3_4 {
		order: 1;
	}
	.tolo-impact-inner {
		grid-template-columns: repeat(2, 1fr);
	}
	.tolo-impact-item:nth-child(2)::after {
		display: none;
	}
	.tolo-partner {
		grid-template-columns: 1fr;
		gap: 30px;
	}
	.tolo-tab-grid {
		grid-template-columns: 1fr;
	}
	.tolo-hero-trust .et_pb_column:not(:last-child) {
		border-right: none;
	}
	.tolo-toolbar {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
}

@media (max-width: 767px) {
	/* single product: feature chips wrap 2-up instead of overflowing */
	.features-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 10px !important;
	}
	.features-grid .feature-card {
		padding: 18px 10px !important;
	}
	/* single product: thumbnail strip stays inside the viewport */
	.cwg-thumbs-wrapper,
	.cwg-thumbs {
		max-width: 100% !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
	}
	.cwg-gallery,
	.cwg-main {
		max-width: 100% !important;
	}
	.tolo-why-card {
		padding: 28px 22px 26px !important;
	}
	.tolo-pack-pill {
		padding: 8px 14px;
		font-size: 13px;
	}
	.tolo-impact {
		padding: 8px 18px;
	}
	.tolo-impact-value {
		font-size: 30px;
	}
	.tolo-impact-item {
		padding: 18px 8px;
	}
	.tolo-impact-item:not(:last-child)::after {
		display: none;
	}
	/* heading hierarchy: H2 never outsizes the 30px mobile H1 */
	.tolo-partner h2,
	.tolo-partner2 h2 {
		font-size: 25px !important;
	}
	/* buttons: stack cleanly with even rhythm on phones */
	.dipl_button .et_pb_module_inner {
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
	}
	.dipl_button_item,
	.dipl_button_item .dipl_button_wrapper {
		margin: 0 !important;
	}
	.dipl_button_link {
		padding-top: 12px !important;
		padding-bottom: 12px !important;
	}
	.tolo-partner-actions .tolo-btn {
		padding: 12px 26px;
		font-size: 15px;
	}
	.tolo-rel-grid {
		grid-template-columns: 1fr;
	}
	.tolo-step-grid {
		grid-template-columns: 1fr;
	}
	.et-l--header .et_pb_menu .et-menu > li > a {
		font-size: 16px !important;
	}
}

/* =============================================================
   13. CASCADE LOCKS — Divi generates module CSS with the
   `.et-db #et-boc .et-l` prefix and !important at mobile
   breakpoints; these mirrored selectors guarantee the grid
   geometry above always wins.
   ============================================================= */

.et-db #et-boc .et-l .tolo-grid ul.products,
body #page-container .tolo-grid ul.products {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 28px !important;
	margin: 0 !important;
}
.et-db #et-boc .et-l .tolo-grid ul.products li.product,
body #page-container .tolo-grid ul.products li.product,
.et-db #et-boc .et-l .et_pb_module.et_pb_shop.tolo-grid .woocommerce ul.products li.product.type-product,
body #page-container .et_pb_module.et_pb_shop.tolo-grid .woocommerce ul.products li.product.type-product {
	width: calc(25% - 22px) !important;
	min-width: 0 !important;
	flex: 0 1 auto !important;
	margin: 0 !important;
	margin-right: 0 !important;
	margin-bottom: 0 !important;
	float: none !important;
}
@media (max-width: 1280px) {
	.et-db #et-boc .et-l .tolo-grid ul.products li.product,
	body #page-container .tolo-grid ul.products li.product {
		width: calc(33.333% - 20px) !important;
	}
}
@media (max-width: 980px) {
	.et-db #et-boc .et-l .tolo-grid ul.products li.product,
	body #page-container .tolo-grid ul.products li.product,
	.et-db #et-boc .et-l .et_pb_module.et_pb_shop.tolo-grid .woocommerce ul.products li.product.type-product,
	body #page-container .et_pb_module.et_pb_shop.tolo-grid .woocommerce ul.products li.product.type-product {
		width: calc(50% - 16px) !important;
		/* Divi's per-module width (47.97% !important) loads after this
		   file and wins the width war — max-width clamps it anyway */
		max-width: calc(50% - 16px) !important;
		margin: 0 !important;
	}
}
@media (max-width: 540px) {
	.et-db #et-boc .et-l .tolo-grid ul.products,
	body #page-container .tolo-grid ul.products {
		gap: 14px !important;
	}
	.et-db #et-boc .et-l .tolo-grid ul.products li.product,
	body #page-container .tolo-grid ul.products li.product,
	.et-db #et-boc .et-l .et_pb_module.et_pb_shop.tolo-grid .woocommerce ul.products li.product.type-product,
	body #page-container .et_pb_module.et_pb_shop.tolo-grid .woocommerce ul.products li.product.type-product {
		width: calc(50% - 9px) !important;
		max-width: calc(50% - 9px) !important;
		margin: 0 !important;
	}
}

/* mobile ordering lives on the row INSIDE the specialty section */
@media (max-width: 980px) {
	.et-db #et-boc .et-l .tolo-arch-main > .et_pb_row,
	.tolo-arch-main > .et_pb_row {
		display: flex !important;
		flex-direction: column !important;
	}
	.et-db #et-boc .et-l .tolo-arch-main > .et_pb_row > .et_pb_column_1_4,
	.tolo-arch-main > .et_pb_row > .et_pb_column_1_4 {
		order: 2 !important;
	}
	.et-db #et-boc .et-l .tolo-arch-main > .et_pb_row > .et_pb_specialty_column,
	.et-db #et-boc .et-l .tolo-arch-main > .et_pb_row > .et_pb_column_3_4,
	.tolo-arch-main > .et_pb_row > .et_pb_specialty_column,
	.tolo-arch-main > .et_pb_row > .et_pb_column_3_4 {
		order: 1 !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tolo-why-card, .tolo-why-card::before, .tolo-ind-card, .tolo-ind-card img,
	.tolo-about-img img, .button.tolo-view-details, .tolo-pack-pill,
	.tolo-rel-card, .tolo-rel-media img, .tolo-step, .tolo-doc-card,
	.tolo-contact-chip, .tolo-btn,
	.woocommerce ul.products li.product {
		transition: none !important;
	}
	.tolo-why-card:hover, .tolo-ind-card:hover, .tolo-rel-card:hover,
	.tolo-step:hover, .tolo-doc-card:hover,
	.woocommerce ul.products li.product:hover {
		transform: none !important;
	}
}

/* =============================================================
   14. LEGAL PAGES — Privacy Policy & Terms & Conditions
   Shared hero + readable document body, on-brand + responsive.
   ============================================================= */
.tolo-legal-hero {
	background: linear-gradient(135deg, var(--tolo-blue) 0%, var(--tolo-blue-deep) 100%) !important;
}
.tolo-legal-hero-inner {
	max-width: 840px;
	margin: 0 auto;
	text-align: center;
}
.tolo-legal-eyebrow {
	display: inline-block;
	color: #fff;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 100px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 6px 16px;
	margin-bottom: 20px;
}
.tolo-legal-hero-inner h1 {
	color: #fff !important;
	font-family: Poppins, sans-serif;
	font-size: 46px;
	font-weight: 700;
	line-height: 1.18;
	margin: 0 0 16px;
	padding: 0;
}
.tolo-legal-sub {
	color: rgba(255, 255, 255, 0.9);
	font-size: 17px;
	line-height: 1.6;
	margin: 0 auto 16px;
	max-width: 640px;
}
.tolo-legal-updated {
	display: inline-block;
	color: rgba(255, 255, 255, 0.75);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0;
}

/* ---- document body ---- */
.tolo-legal {
	max-width: 880px;
	margin: 0 auto;
	color: var(--tolo-body);
	font-size: 16px;
	line-height: 1.78;
}
.tolo-legal-intro {
	font-size: 17.5px;
	line-height: 1.7;
	color: var(--tolo-ink);
	margin: 0 0 8px;
}
.tolo-legal-section {
	margin-top: 14px;
}
.tolo-legal h2 {
	font-family: Poppins, sans-serif;
	color: var(--tolo-ink) !important;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
	margin: 40px 0 16px;
	padding-bottom: 12px;
	position: relative;
}
.tolo-legal h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 44px;
	height: 3px;
	background: var(--tolo-red);
	border-radius: 3px;
}
.tolo-legal h3 {
	color: var(--tolo-ink) !important;
	font-size: 18px;
	font-weight: 700;
	margin: 26px 0 8px;
}
.tolo-legal p {
	margin: 0 0 16px;
}
.tolo-legal ul {
	margin: 0 0 18px;
	padding-left: 0;
	list-style: none;
}
.tolo-legal ul li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 10px;
}
.tolo-legal ul li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 11px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--tolo-blue);
}
.tolo-legal a {
	color: var(--tolo-blue);
	text-decoration: none;
	font-weight: 600;
}
.tolo-legal a:hover {
	text-decoration: underline;
}
.tolo-legal strong {
	color: var(--tolo-ink);
}

/* contact card at the end of each policy */
.tolo-legal-contact {
	margin-top: 36px;
	background: var(--tolo-bg-soft);
	border: 1px solid var(--tolo-line);
	border-radius: var(--tolo-radius);
	padding: 28px 30px;
}
.tolo-legal-contact h2 {
	margin-top: 0;
}
.tolo-legal-contact p {
	margin: 0 0 6px;
}
.tolo-legal-contact .tolo-legal-company {
	color: var(--tolo-ink);
	font-weight: 700;
	font-size: 17px;
}

@media (max-width: 980px) {
	.tolo-legal-hero-inner h1 {
		font-size: 30px;
	}
	.tolo-legal-eyebrow {
		margin-bottom: 16px;
	}
	.tolo-legal-sub {
		font-size: 15.5px;
	}
	.tolo-legal {
		font-size: 15.5px;
	}
	.tolo-legal-intro {
		font-size: 16.5px;
	}
	.tolo-legal h2 {
		font-size: 21px;
		margin-top: 34px;
	}
	.tolo-legal h3 {
		font-size: 16.5px;
	}
	.tolo-legal-contact {
		padding: 22px 20px;
	}
}

/* =============================================================
   15. PAGE TRANSITION — gentle fade-in on every page load so
   navigation eases in smoothly instead of snapping/jerking in.
   Also masks any brief font/image reflow during load.
   Falls back to fully visible if animations are unsupported,
   and is disabled for users who prefer reduced motion.
   ============================================================= */
@keyframes tolo-page-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
/* opacity-only (no transform) so we never create a containing block
   that would break the sticky header or fixed contact widget */
#page-container {
	animation: tolo-page-in 0.5s var(--tolo-ease) both;
}
/* smoother in-page jumps (anchor links, back-to-top) */
html {
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	#page-container {
		animation: none !important;
	}
	html {
		scroll-behavior: auto;
	}
}

/* =============================================================
   16. HOMEPAGE HERO — responsive fixes
   The hero uses a wide composite BACKGROUND banner (logistics left,
   divider, product bowls right) at background-size:cover. On narrower
   viewports cover zooms the banner so the bowls drift left and overlap
   the headline. Divi only swaps to the clean stacked layout at <=980px,
   so the 981-1366px band still shows the overlapping desktop banner.
   ============================================================= */

/* (A) 981-1366px — match the clean stacked "tablet" layout:
   drop the zooming banner, stack the columns, reveal the product image. */
@media (min-width: 981px) and (max-width: 1366px) {
	body.home #page-container .et_pb_section_0 {
		background-image: none !important;
	}
	body.home #page-container .et_pb_section_0 > .et_pb_row {
		width: 90% !important;
		max-width: 1100px !important;
	}
	body.home #page-container .et_pb_section_0 > .et_pb_row > .et_pb_column {
		width: 100% !important;
		margin: 0 0 10px !important;
		float: none !important;
	}
	body.home #page-container .et_pb_section_0 .et_pb_image_0 {
		display: block !important;
		margin: 20px auto 0 !important;
		text-align: center;
	}
	body.home #page-container .et_pb_section_0 .et_pb_image_0 img {
		margin: 0 auto;
		max-width: 100%;
	}
}

/* (B) >=1367px — keep the banner, but guarantee the text always sits on a
   clean white field so the bowls/divider can never overlap the headline. */
@media (min-width: 1367px) {
	body.home #page-container .et_pb_section_0 {
		position: relative;
		background-size: cover !important;
		background-position: right center !important;
	}
	body.home #page-container .et_pb_section_0::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: linear-gradient(90deg, #ffffff 0%, #ffffff 40%, rgba(255, 255, 255, 0) 64%);
		pointer-events: none;
		z-index: 0;
	}
	body.home #page-container .et_pb_section_0 > .et_pb_row {
		position: relative;
		z-index: 1;
	}
}

/* =============================================================
   17. HEADER — Request Order button + tablet mobile-menu dropdown
   ============================================================= */

/* (C) keep the header "Request Order" button tidy and vertically centered
   in the hamburger band so it doesn't sit awkwardly. */
@media (max-width: 1280px) {
	.et-l--header .et_pb_button,
	.et-l--header a.et_pb_button {
		white-space: nowrap !important;
		align-self: center;
	}
}

/* (D) tablet/phone mobile-menu dropdown: render as a clean full-width panel
   anchored under the header instead of a narrow box offset under the logo. */
@media (max-width: 980px) {
	/* give the header row a full-width positioning context */
	.et-l--header .et_pb_row {
		position: relative !important;
	}
	/* The mobile dropdown is position:absolute and was anchoring to its own
	   menu COLUMN (.et_pb_column_3_5, ~half the header) — which is why it
	   opened at ~half width pinned to the left under the logo. Strip the
	   positioning context off the column + every menu wrapper so the dropdown
	   anchors to the full-width header row instead. */
	.et-l--header .et_pb_row .et_pb_column,
	.et-l--header .et_pb_menu,
	.et-l--header .et_pb_menu .et_pb_menu_inner_container,
	.et-l--header .et_pb_menu .et_pb_menu__wrap,
	.et-l--header .et_pb_menu .et_mobile_nav_menu {
		position: static !important;
	}
	/* render the dropdown as a clean full-width panel spanning the header row
	   (items stay left-aligned by Divi default) */
	.et-l--header .et_mobile_menu {
		position: absolute !important;
		top: 100% !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		margin: 0 !important;
		z-index: 999 !important;
		border-top: 3px solid var(--tolo-red) !important;
		box-shadow: 0 18px 40px rgba(16, 24, 40, 0.16) !important;
	}
	.et-l--header .et_mobile_menu li a {
		padding-left: 6% !important;
		padding-right: 6% !important;
	}
}

/* =============================================================
   18. CONTACT hero — responsive contact card (981-1366px)
   The hero is a specialty section with the truck image on the right,
   so the contact card sits in a narrow ~50% column and the 4 boxes
   (Call Us / Email Us / Business Hours / Our Location) squeeze to
   ~98px each (the WhatsApp badge wraps per-letter). Wrap to 2x2.
   At <=980px Divi already stacks the hero full-width (card is fine).
   ============================================================= */
@media (min-width: 981px) and (max-width: 1366px) {
	.contact-info-row {
		flex-wrap: wrap !important;
	}
	.contact-box {
		flex: 0 0 50% !important;
		max-width: 50% !important;
		min-height: 0 !important;
		padding: 20px 12px !important;
		box-sizing: border-box;
	}
	/* the vertical dividers are wrong in a 2x2 grid — drop them */
	.contact-box:not(:last-child)::after {
		display: none !important;
	}
}

/* =============================================================
   19. FOOTER — 2-up columns on tablet/mid widths (981-1366px)
   The footer is a 4-up (1_4 x4) row; at <=1366px each column is only
   ~194px so the Products list and other labels wrap mid-phrase.
   Lay the four columns out 2-per-row so each gets ~half the width,
   and keep the product list a single clean column.
   ============================================================= */
@media (min-width: 981px) and (max-width: 1366px) {
	.et-l--footer .et_pb_row .et_pb_column.et_pb_column_1_4 {
		width: 46% !important;
		margin-right: 8% !important;
		margin-bottom: 36px !important;
	}
	.et-l--footer .et_pb_row .et_pb_column.et_pb_column_1_4:nth-child(2n) {
		margin-right: 0 !important;
	}
	/* product link list stays a single column so labels never split */
	.et-l--footer .et_pb_text .et_pb_text_inner,
	.et-l--footer .et_pb_text .et_pb_text_inner p {
		column-count: 1 !important;
	}
}

/* =============================================================
   20. ABOUT / WHOLESALE hero — responsive trust badges (981-1366px)
   Both heroes are specialty sections: the heading + 4 trust blurbs
   sit in a narrow ~50% left column while the cargo image fills the
   right. The 4 blurbs float:left at ~25% each, so on mid widths they
   collapse to ~92-95px and the labels break mid-word ("Distributi on",
   "Partnersh ips", "Wholesal e"). Wrap them 2x2 so each badge gets
   ~half the column and the words stay whole. Scoped to the first
   section's inner-row blurbs — only About + Wholesale match this
   pattern, so no other hero is affected. <=980px Divi already stacks
   the section full-width, where the 4-up badges fit fine.
   ============================================================= */
@media (min-width: 981px) and (max-width: 1366px) {
	.et_pb_section_0 .et_pb_row_inner .et_pb_blurb {
		width: 50% !important;
		box-sizing: border-box !important;
		padding-left: 8px !important;
		padding-right: 8px !important;
		margin-bottom: 24px !important;
	}
	/* start a fresh row on the 1st and 3rd badge so uneven label
	   heights can't snag the float and stagger the grid */
	.et_pb_section_0 .et_pb_row_inner .et_pb_blurb:nth-of-type(2n+1) {
		clear: left !important;
	}
}

/* =============================================================
   21. HEADER SEARCH — icon toggle + slide-down Ivory AJAX panel
   tolo.js injects the icon before Request Order (desktop) / before
   the hamburger (mobile) and anchors the panel to the header bottom;
   clicking the icon expands the Ivory AJAX form below the header.
   No popup, no redirect. Header system is left untouched.
   ============================================================= */
.et-l--header { position: relative !important; }

/* desktop: keep the search icon inline + right-aligned next to Request Order */
.et-l--header .tolo-search-host {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	flex-wrap: nowrap !important;
}

.tolo-search-toggle {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto;
	align-self: center;
	width: 42px !important;
	height: 42px !important;
	margin: 0 14px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: #475467 !important;
	cursor: pointer !important;
	transition: color 0.2s var(--tolo-ease), background 0.2s var(--tolo-ease) !important;
}
.tolo-search-toggle svg { display: block !important; width: 22px !important; height: 22px !important; }
.tolo-search-toggle:hover,
.tolo-search-toggle[aria-expanded="true"] {
	color: #0059E2 !important;
	background: rgba(0, 89, 226, 0.08) !important;
}
.tolo-search-toggle:focus-visible {
	outline: 3px solid rgba(0, 89, 226, 0.45) !important;
	outline-offset: 2px !important;
}

.tolo-search-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 9990;
	background: #fff;
	/* thin brand accent continues the header's red underline -> feels integrated */
	border-top: 2px solid #ED3237;
	box-shadow: 0 18px 36px rgba(16, 24, 40, 0.14);
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s ease;
}
.tolo-search-panel.is-open { max-height: 120px; opacity: 1; }
.tolo-search-panel.is-overflow { overflow: visible; }

/* ---- field design: LEFT-ICON COMMAND BAR (magnifier baked in as a left
   prefix; submit visually-hidden — Enter + Ivory live-AJAX still search) ---- */
#tolo-search-panel .tolo-search-panel__inner {
	max-width: 560px !important;
	margin: 0 auto !important;
	padding: 18px 24px !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	position: relative !important;
}
#tolo-search-panel .tolo-search-panel__form { flex: 1 1 auto !important; min-width: 0 !important; }

/* the form IS the field — one soft surface, hairline border */
#tolo-search-panel .is-search-form {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--tolo-bg-soft) !important;
	border: 1px solid var(--tolo-line) !important;
	border-radius: 14px !important;
	box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.03) !important;
	transition: border-color 0.2s var(--tolo-ease), box-shadow 0.2s var(--tolo-ease), background 0.2s var(--tolo-ease) !important;
}
#tolo-search-panel .is-search-form:hover { border-color: #cbd2dc !important; }
#tolo-search-panel .is-search-form:focus-within {
	background: #fff !important;
	border-color: #0059E2 !important;
	box-shadow: 0 0 0 4px rgba(0, 89, 226, 0.12), 0 6px 18px rgba(16, 24, 40, 0.06) !important;
}

/* label holds the magnifier as a left prefix — icon IS the field */
#tolo-search-panel .is-search-form label {
	flex: 1 1 auto !important;
	display: flex !important;
	align-items: center !important;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0 !important;
	position: relative !important;
}
#tolo-search-panel .is-search-form label::before {
	content: "" !important;
	flex: 0 0 auto !important;
	width: 19px !important;
	height: 19px !important;
	margin: 0 11px 0 18px !important;
	background-color: #98A2B3;
	-webkit-mask: center / 19px 19px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
	        mask: center / 19px 19px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
	transition: background-color 0.2s var(--tolo-ease) !important;
}
#tolo-search-panel .is-search-form:focus-within label::before { background-color: #0059E2; }

/* input fills the rest — transparent, borderless */
#tolo-search-panel .is-search-input {
	flex: 1 1 auto !important;
	width: 100% !important;
	height: 52px !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
	padding: 0 18px 0 0 !important;
	font-size: 15.5px !important;
	font-weight: 500 !important;
	line-height: 52px !important;
	color: var(--tolo-ink) !important;
	box-shadow: none !important;
	outline: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}
#tolo-search-panel .is-search-input::placeholder { color: #98A2B3 !important; font-weight: 500 !important; opacity: 1 !important; }
#tolo-search-panel .is-search-input::-webkit-search-decoration,
#tolo-search-panel .is-search-input::-webkit-search-cancel-button,
#tolo-search-panel .is-search-input::-webkit-search-results-button { -webkit-appearance: none !important; display: none !important; }

/* submit: visually hidden, still operable for Enter + a11y */
#tolo-search-panel .is-search-submit {
	position: absolute !important;
	width: 1px !important; height: 1px !important;
	padding: 0 !important; margin: -1px !important; border: 0 !important;
	overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
	white-space: nowrap !important; pointer-events: none !important;
}

/* loader: pinned right, where the old button lived */
#tolo-search-panel .is-loader-image {
	position: absolute !important; right: 16px !important; top: 50% !important;
	transform: translateY(-50%) !important; margin: 0 !important; line-height: 0 !important; pointer-events: none !important;
}
#tolo-search-panel .is-loader-image img,
#tolo-search-panel .is-loader-image svg { width: 18px !important; height: 18px !important; display: block !important; }

/* close (×): quiet ghost circle, reddens on hover */
#tolo-search-panel .tolo-search-close {
	flex: 0 0 auto !important;
	width: 40px !important; height: 40px !important;
	padding: 0 !important; border: 0 !important; border-radius: 50% !important;
	background: transparent !important; color: #98A2B3 !important; cursor: pointer !important;
	display: inline-flex !important; align-items: center !important; justify-content: center !important;
	transition: background 0.2s var(--tolo-ease), color 0.2s var(--tolo-ease) !important;
}
#tolo-search-panel .tolo-search-close:hover { background: var(--tolo-bg-soft) !important; color: #ED3237 !important; }
#tolo-search-panel .tolo-search-close:focus-visible { outline: 3px solid rgba(0, 89, 226, 0.45) !important; outline-offset: 2px !important; }
#tolo-search-panel .tolo-search-close svg { width: 18px !important; height: 18px !important; display: block !important; }

/* keep Ivory's AJAX results dropdown above page content */
#tolo-search-panel .is-ajax-search-result,
#tolo-search-panel .is-search-result,
#tolo-search-panel .is-results { z-index: 9991 !important; }

@media (max-width: 980px) {
	#tolo-search-panel .tolo-search-panel__inner { max-width: 92% !important; padding: 16px 0 !important; }
}
@media (max-width: 767px) {
	#tolo-search-panel .tolo-search-panel__inner { max-width: 100% !important; padding: 14px 5% !important; gap: 6px !important; }
	#tolo-search-panel .is-search-input { height: 48px !important; line-height: 48px !important; font-size: 16px !important; }
	#tolo-search-panel .is-search-form label::before {
		margin: 0 9px 0 15px !important; width: 18px !important; height: 18px !important;
		-webkit-mask-size: 18px 18px !important; mask-size: 18px 18px !important;
	}
	#tolo-search-panel .tolo-search-close { width: 36px !important; height: 36px !important; }
	.tolo-search-toggle { width: 38px !important; height: 38px !important; margin-right: 10px !important; }
	.tolo-search-toggle svg { width: 20px !important; height: 20px !important; }
}

/* =============================================================
   22. RESOURCES PAGE — anchor sections (Quality Standards /
   Product Catalog / FAQs / Wholesale Ordering Guide). The header
   is NOT sticky, so a small scroll-margin gives breathing room
   when the dropdown anchor links jump to a section.
   ============================================================= */
#quality-standards, #product-catalog, #faqs, #wholesale-ordering-guide { scroll-margin-top: 28px; }

/* "what's inside the catalog" check-list */
.tolo-catalog-inside { max-width: 860px; margin: 0 auto; }
.tolo-catalog-inside h4 {
	font-family: Poppins, sans-serif; font-size: 16px; font-weight: 700;
	color: #101828; margin: 0 0 16px; text-align: center;
}
.tolo-catalog-list {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 34px;
}
.tolo-catalog-list li {
	position: relative; padding-left: 30px;
	color: #4A5568; font-size: 15px; line-height: 1.55;
}
.tolo-catalog-list li::before {
	content: "\2713"; position: absolute; left: 0; top: 1px;
	width: 20px; height: 20px; border-radius: 50%;
	background: rgba(0, 89, 226, 0.1); color: #0059E2;
	font-size: 12px; font-weight: 700; line-height: 20px; text-align: center;
}
@media (max-width: 767px) { .tolo-catalog-list { grid-template-columns: 1fr; gap: 12px; } }

/* FAQ accordion — clean separated cards */
.tolo-faq .et_pb_toggle {
	border: 1px solid #E4E7EC !important;
	border-radius: 10px !important;
	margin-bottom: 10px !important;
	padding: 18px 22px !important;
	box-shadow: 0 2px 8px rgba(16, 24, 40, 0.03);
	transition: box-shadow 0.2s var(--tolo-ease), border-color 0.2s var(--tolo-ease);
}
.tolo-faq .et_pb_toggle.et_pb_toggle_open { border-color: rgba(0, 89, 226, 0.35) !important; box-shadow: 0 8px 22px rgba(16, 24, 40, 0.07); }
.tolo-faq .et_pb_toggle_title { font-weight: 600 !important; padding-right: 30px !important; }
.tolo-faq .et_pb_toggle .et_pb_toggle_content { margin-top: 10px; }
.tolo-faq .et_pb_toggle a { color: #0059E2 !important; font-weight: 600; }

/* =============================================================
   23. DESKTOP DROPDOWN — forgiving hover (no quick-hide, no gap)
   The desktop sub-menus are pure-CSS hover (no JS). By default Divi
   hides them the instant the cursor leaves the item, so moving down
   to the dropdown can drop it. We keep the dropdown fully visible for
   a ~0.3s grace period after hover-out (then fade), and add an
   invisible "bridge" across the item/dropdown boundary so the cursor
   never lands in dead space. Desktop only (>=981px); the mobile
   accordion is untouched.
   ============================================================= */
@media (min-width: 981px) {
	.et-l--header .et_pb_menu .et-menu li ul.sub-menu,
	.et-l--header .et-menu li ul.sub-menu {
		transition: opacity 0.25s ease 0.3s, visibility 0s linear 0.55s !important;
	}
	.et-l--header .et_pb_menu .et-menu li:hover > ul.sub-menu,
	.et-l--header .et-menu li:hover > ul.sub-menu,
	.et-l--header .et_pb_menu .et-menu li li:hover > ul.sub-menu,
	.et-l--header .et-menu li li:hover > ul.sub-menu {
		transition: opacity 0.25s ease 0s, visibility 0s linear 0s !important;
	}
	/* invisible bridge over the item -> dropdown boundary */
	.et-l--header .et-menu li.menu-item-has-children > ul.sub-menu::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -12px;
		height: 14px;
		background: transparent;
	}
}

/* =============================================================
   24. CONTACT hero card — ENTIRE box clickable (stretched link).
   Each clickable box gets a transparent overlay <a> covering it;
   the WhatsApp link sits above the overlay so it still works.
   ============================================================= */
.contact-box.tolo-box-clickable { cursor: pointer; transition: background 0.2s var(--tolo-ease); }
.contact-box.tolo-box-clickable:hover { background: #F7F9FC; }
.contact-box.tolo-box-clickable:hover h4 { color: #0059E2; }
.contact-box.tolo-box-clickable:hover .icon-wrap { background: #E7EEFC; }
.contact-box .tolo-box-link {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	font-size: 0;
	text-indent: -9999px;
	overflow: hidden;
}
/* keep the WhatsApp link clickable above the box overlay */
.contact-box .tolo-wa { position: relative; z-index: 2; }
/* =============================================================
   25. SINGLE PRODUCT — SPECIFICATION TABLE (Overview tab)
   The long description now holds each product's specification
   sheet (Product Name / Origin / Type / Colour / Taste / ...).
   Rendered as a striped label-value list rather than a real
   <table> so it reflows to one column on phones.
   ============================================================= */
.tolo-spec {
	margin: 0;
	border: 1px solid var(--tolo-line);
	border-radius: var(--tolo-radius-sm);
	overflow: hidden;
	background: #fff;
}
.tolo-spec-row {
	display: grid;
	grid-template-columns: minmax(180px, 250px) 1fr;
	gap: 0;
	border-top: 1px solid var(--tolo-line);
}
.tolo-spec-row:first-child {
	border-top: 0;
}
.tolo-spec-row:nth-child(odd) {
	background: var(--tolo-bg-soft);
}
.tolo-spec-label,
.tolo-spec-value {
	padding: 13px 20px;
	font-size: 15px;
	line-height: 1.6;
}
.tolo-spec-label {
	color: var(--tolo-ink);
	font-weight: 700;
	border-right: 1px solid var(--tolo-line);
}
.tolo-spec-value {
	color: var(--tolo-body);
}
/* optional note under the table, e.g. the ingredient line */
.tolo-spec-note {
	margin: 14px 0 0;
	color: var(--tolo-body);
	font-size: 14.5px;
	line-height: 1.7;
}
.tolo-spec-note strong {
	color: var(--tolo-ink);
}

@media (max-width: 767px) {
	.tolo-spec-row {
		grid-template-columns: 1fr;
	}
	.tolo-spec-label {
		border-right: 0;
		padding-bottom: 0;
	}
	.tolo-spec-value {
		padding-top: 4px;
	}
}

/* =============================================================
   26. SINGLE PRODUCT — CATEGORY EYEBROW
   The category above the product title is a linked dynamic field,
   so it inherits Divi's global link blue. Brand red instead, to
   match the category eyebrow on the catalog cards.
   ============================================================= */
.tolo-single-cat,
.tolo-single-cat p,
.tolo-single-cat a {
	color: var(--tolo-red) !important;
}
.tolo-single-cat a {
	text-decoration: none;
	transition: color 0.2s var(--tolo-ease);
}
.tolo-single-cat a:hover {
	color: var(--tolo-red-deep) !important;
}

/* =============================================================
   27. CATALOG CARDS — ALIGN THE "VIEW DETAILS" BUTTON
   Product names wrap to different numbers of lines, which used to
   leave the CTA floating at a different height on cards with a
   short name (Sunflower Seeds, Apricot Seeds (Kernel)). The cards
   are already equal-height column flex containers, so pushing the
   button with an auto top margin pins it to the bottom of every
   card regardless of how long the name is.
   This replaces the old workaround of typing <br> into those two
   product titles to force a second line.
   ============================================================= */
.woocommerce ul.products li.product .tolo-view-details,
ul.products li.product .tolo-view-details {
	margin-top: auto !important;
}