/* ==========================================================================
   Wholesale Fishing Flies Kenya — premium trust strip (theme: imake)
   Rebuilds the stock grey YBC "custom-5" band that sits above the footer and
   merges it with the premium wine footer so the page closes as one dark band.

   Markup untouched:
     .footer-top > .container > ul.ybc-widget-ybc-custom-5 > li.ybc-widget-item

   Palette follows footer-premium-wff.css: #1b352d / #b8542c / #d9805a.
   The theme positions the <ul> absolutely with a grey background and draws
   1px separators at height:100vw (they bled across the page); both are undone
   here and replaced by real cards.
   ========================================================================== */

/* ---------- band ---------- */
.footer-top {
	position: relative;
	z-index: 1;
	float: left;
	width: 100%;
	background-color: #0f221d !important;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='90' viewBox='0 0 520 90'%3E%3Cpath d='M0 46 Q 65 16 130 46 T 260 46 T 390 46 T 520 46' fill='none' stroke='%23ffffff' stroke-opacity='.05' stroke-width='1.2'/%3E%3Cpath d='M0 66 Q 65 36 130 66 T 260 66 T 390 66 T 520 66' fill='none' stroke='%23ffffff' stroke-opacity='.03' stroke-width='1'/%3E%3C/svg%3E"),
		radial-gradient(900px 300px at 8% -40%, rgba(184, 84, 44, .24), transparent 62%),
		radial-gradient(760px 260px at 96% -20%, rgba(217, 128, 90, .13), transparent 60%),
		linear-gradient(180deg, #0d1f1a 0%, #10241f 55%, #1b352d 100%) !important;
	/* the wave tile is 90px tall: repeating it vertically drew lines through
	   the badge titles and copy on tall (mobile) footers */
	background-repeat: repeat-x, no-repeat, no-repeat, no-repeat !important;
	background-position: left top, left top, right top, center top !important;
	border: 0 !important;
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06);
	margin: 0 !important;
	padding: 58px 0 46px !important;
	overflow: hidden;
	isolation: isolate;
}

/* white wave crest on the top edge — the page flows into the dark band */
.footer-top::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	height: 34px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 34' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,12 C1200,32 960,-2 720,14 C480,30 240,-2 0,16 Z' fill='%23f3eee2'/%3E%3C/svg%3E") no-repeat center top / 100% 100%;
	pointer-events: none;
	z-index: 1;
}

.footer-top .container {
	position: relative;
	z-index: 2;
}

/* the footer now continues the band — no white gap between them */
body .footer-wrapper {
	margin-top: 0 !important;
	background-color: #1b352d !important;
}

body .footer-wrapper::before {
	content: none !important;
	display: none !important;
}

/* ---------- grid (replaces the floated/absolute col-sm-3 row) ---------- */
.footer-top ul.ybc-widget-ybc-custom-5 {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	position: static !important;
	float: none !important;
	left: auto !important;
	right: auto !important;
	top: auto !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	list-style: none !important;
	z-index: auto !important;
}

.footer-top ul.ybc-widget-ybc-custom-5 > li.ybc-widget-item {
	display: block !important;
	float: none !important;
	width: auto !important;
	min-width: 0;
	min-height: 100%;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	position: relative;
	/* the theme paints the <li> with a white gradient; it sits behind the
	   card and turned the whole strip into opaque white cards */
	background: none !important;
	background-image: none !important;
}

/* theme separators: 1px lines at height:100vw that bled over the page */
.footer-top ul.ybc-widget-ybc-custom-5 > li.ybc-widget-item::before,
.footer-top ul.ybc-widget-ybc-custom-5 > li.ybc-widget-item::after {
	content: none !important;
	display: none !important;
	border: 0 !important;
	height: auto !important;
}

/* ---------- card ---------- */
.footer-top .ybc-widget-item-content {
	height: 100%;
	display: flex;
	background-color: rgba(255, 255, 255, .045);
	background-image: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012));
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: 16px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .06),
		0 12px 28px -22px rgba(0, 0, 0, .9);
	padding: 26px 18px 24px;
	transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease, background-color .28s ease;
}

.footer-top .content_toggle {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	text-align: center;
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
}

/* ---------- icon badge ---------- */
.footer-top .ybc-widget-item i.fa {
	font-size: 0 !important;      /* theme already zeroes it; keeps the stray "." hidden */
	line-height: 1 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	float: none !important;
	margin: 0 !important;
	border-radius: 50%;
	color: #d9805a !important;
	background-color: rgba(184, 84, 44, .10);
	background-image: radial-gradient(circle at 32% 24%, rgba(184, 84, 44, .30), rgba(184, 84, 44, .07) 68%);
	border: 1px solid rgba(217, 128, 90, .34);
	box-shadow:
		0 10px 22px -14px rgba(184, 84, 44, .85),
		inset 0 1px 0 rgba(255, 255, 255, .12);
	transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.footer-top .ybc-widget-item i.fa::before,
.footer-top .ybc-widget-item i.fa::after {
	font-size: 21px !important;
	line-height: 1 !important;
	text-indent: 0 !important;
}

/* ---------- text ---------- */
.footer-top .ybc-widget-description {
	width: 100%;
	margin: 0 !important;
	text-align: center;
}

.footer-top .ybc-widget-description > p {
	float: none !important;
	width: 100%;
	margin: 0 !important;
}

/* item 1 carries a bare <i>, items 2-4 wrap it in a <p>. Both get the same
   58px row + 16px gap so all four titles sit on one line. */
.footer-top .content_toggle > i.fa {
	margin: 0 0 16px !important;
}

.footer-top .ybc-widget-description > p:first-child {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	margin: 0 0 16px !important;
}

.footer-top .ybc-widget-description h4 {
	float: none !important;
	width: 100%;
	margin: 0 0 7px !important;
	font-size: 12.5px !important;
	font-weight: 800 !important;
	line-height: 1.4 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
	color: #ffffff !important;
}

.footer-top .ybc-widget-description p {
	float: none !important;
	width: 100%;
	font-size: 12.5px !important;
	line-height: 1.62 !important;
	color: rgba(236, 230, 217, .68) !important;
	margin: 0 !important;
}

.footer-top .ybc-widget-description strong {
	color: #e0a184 !important;
	font-weight: 700 !important;
}

/* The homepage stylesheet paints the trust widgets as white cards
   (body.index .ybc-widget-item). The strip sits in the footer of every page,
   so the dark glass treatment has to win there too - otherwise the titles
   stay dark-green on a dark card and the copy disappears. */
body.index .footer-top .ybc-widget-description h4,
body.index .footer-top .ybc-widget-item h4 {
	font-size: 12.5px !important;
	font-weight: 800 !important;
	line-height: 1.4 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
	color: #ffffff !important;
	margin: 0 0 7px !important;
}

body.index .footer-top .ybc-widget-description p,
body.index .footer-top .ybc-widget-item p {
	font-size: 12.5px !important;
	line-height: 1.62 !important;
	color: rgba(236, 230, 217, .68) !important;
}

body.index .footer-top .ybc-widget-description strong {
	color: #e0a184 !important;
	font-weight: 700 !important;
}

/* ---------- hover ---------- */
.footer-top li.ybc-widget-item:hover .ybc-widget-item-content {
	transform: translateY(-4px);
	border-color: rgba(217, 128, 90, .42);
	background-color: rgba(255, 255, 255, .03);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .09),
		0 26px 44px -30px rgba(0, 0, 0, .95),
		0 0 0 1px rgba(184, 84, 44, .10);
}

.footer-top li.ybc-widget-item:hover i.fa {
	transform: translateY(-2px) scale(1.06);
	border-color: rgba(217, 128, 90, .62);
	box-shadow:
		0 14px 26px -14px rgba(184, 84, 44, .95),
		inset 0 1px 0 rgba(255, 255, 255, .16);
}

/* ---------- responsive ---------- */
@media (max-width: 991px) {
	.footer-top {
		padding: 46px 0 34px !important;
	}

	.footer-top::before {
		height: 26px;
	}

	.footer-top ul.ybc-widget-ybc-custom-5 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.footer-top .ybc-widget-item-content {
		padding: 22px 16px 20px;
	}
}

@media (max-width: 599px) {
	.footer-top ul.ybc-widget-ybc-custom-5 {
		grid-template-columns: minmax(0, 1fr);
	}

	.footer-top .ybc-widget-item i.fa {
		width: 50px;
		height: 50px;
	}

	.footer-top .ybc-widget-item i.fa::before,
	.footer-top .ybc-widget-item i.fa::after {
		font-size: 18px !important;
	}
}