/* ==========================================================
   K9 Paw – Zigzag Feature Row widget
   ========================================================== */
.k9zz {
	--k9-gold: #DCA54A;
	--k9-img-w: 42%;
	--k9-notch: 70px;
	position: relative;
	display: flex;
	align-items: stretch;
	min-height: 520px;
	overflow: hidden;
	background: #f7f3ec;
	font-family: var(--k9-font, 'Roboto', sans-serif);
	color: #4a4a4a;
}
.k9zz *, .k9zz *::before, .k9zz *::after { box-sizing: border-box; }
.k9zz--img-right { flex-direction: row-reverse; }

/* ---------- Image column (background image) ---------- */
.k9zz__media {
	position: relative;
	flex: 0 0 var(--k9-img-w);
	max-width: var(--k9-img-w);
	overflow: hidden;
	z-index: 1;
}
.k9zz--img-left .k9zz__media {
	clip-path: polygon(0 0, calc(100% - var(--k9-notch)) 0, 100% 50%, calc(100% - var(--k9-notch)) 100%, 0 100%);
}
.k9zz--img-right .k9zz__media {
	clip-path: polygon(var(--k9-notch) 0, 100% 0, 100% 100%, var(--k9-notch) 100%, 0 50%);
}
.k9zz__bg {
	position: absolute; inset: 0;
	background-size: cover; background-position: center; background-repeat: no-repeat;
	transition: transform 1s ease;
}
.k9zz-zoom-yes .k9zz:hover .k9zz__bg { transform: scale(1.05); }
.k9zz__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.k9zz__media-link { position: absolute; inset: 0; z-index: 2; }

/* ---------- Gold chevron accent ---------- */
.k9zz__chev {
	--k9-chev: var(--k9-gold);
	position: absolute; top: 0; bottom: 0; z-index: 2;
	width: calc(var(--k9-notch) + 40px);
	pointer-events: none;
}
.k9zz--img-left .k9zz__chev  { left: calc(var(--k9-img-w) - var(--k9-notch) + 6px); }
.k9zz--img-right .k9zz__chev { right: calc(var(--k9-img-w) - var(--k9-notch) + 6px); transform: scaleX(-1); }
.k9zz__chev i {
	position: absolute; top: 0; bottom: 0; left: 0; width: 100%;
	clip-path: polygon(0 0, 22% 0, 100% 50%, 22% 100%, 0 100%, 0 96%, 78% 50%, 0 4%);
}
.k9zz__chev i:first-child {
	background: linear-gradient(180deg, transparent 0%, var(--k9-chev) 18%, var(--k9-chev) 82%, transparent 100%);
	opacity: .95;
}
.k9zz__chev i:last-child {
	left: 26px;
	background: linear-gradient(180deg, transparent 0%, var(--k9-chev) 30%, var(--k9-chev) 70%, transparent 100%);
	opacity: .25;
}

/* ---------- Content column ---------- */
.k9zz__content {
	position: relative;
	flex: 1 1 auto;
	display: flex; flex-direction: column; justify-content: center;
	padding: 50px 6% 50px 7%;
}
.k9zz--img-right .k9zz__content { padding: 50px 7% 50px 6%; }
.k9zz__content-in { position: relative; z-index: 2; max-width: 680px; width: 100%; }
.k9zz--img-left .k9zz__content-in { margin-left: 2%; }

.k9zz__wm {
	position: absolute; top: 50%; z-index: 0; pointer-events: none;
	font-size: 280px; line-height: 1; color: rgba(220,165,74,.08);
	transform: translateY(-50%);
}
.k9zz__wm svg { width: 280px; height: 280px; fill: currentColor; }
.k9zz--img-left .k9zz__wm  { right: -40px; }
.k9zz--img-right .k9zz__wm { right: 4%; }

.k9zz__paws { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.k9zz__paws i { position: absolute; color: rgba(220,165,74,.12); font-size: 42px; }
.k9zz__paws i:nth-child(1) { top: 12%; right: 30%; transform: rotate(-20deg); }
.k9zz__paws i:nth-child(2) { top: 48%; right: 22%; transform: rotate(10deg); }
.k9zz__paws i:nth-child(3) { bottom: 10%; right: 34%; transform: rotate(-12deg); }

.k9zz__sub {
	font-size: 13px; font-weight: 600; letter-spacing: 2.2px; text-transform: uppercase;
	color: var(--k9-gold); margin-bottom: 10px;
}
.k9zz__title {
	font-family: var(--k9-font, 'Roboto', sans-serif);
	font-size: 44px; font-weight: 800; line-height: 1.15;
	color: #171717; margin: 0 0 16px;
}
.k9zz__title em { font-style: normal; color: var(--k9-gold); }
.k9zz__desc { font-size: 16px; line-height: 1.7; color: #555; margin-bottom: 26px; }
.k9zz__desc p { margin: 0 0 10px; color: inherit; font: inherit; }
.k9zz__desc p:last-child { margin: 0; }

/* Features */
.k9zz__features {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 36px; row-gap: 22px; margin-bottom: 32px;
}
.k9zz__feat { display: flex; align-items: center; gap: 16px; }
.k9zz__fic {
	flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 20px; color: #6b4a14;
	background: linear-gradient(145deg, #fbe9c6, #f1d79f);
	border: 2px solid rgba(220,165,74,.45);
	box-shadow: 0 6px 14px rgba(220,165,74,.22);
	transition: transform .4s ease, background .4s ease, color .4s ease;
}
.k9zz__fic svg { width: 20px; height: 20px; fill: currentColor; }
.k9zz__feat:hover .k9zz__fic { transform: translateY(-3px) rotate(-8deg); background: #171717; color: var(--k9-gold); }
.k9zz__ftitle {
	font-family: var(--k9-font, 'Roboto', sans-serif);
	font-size: 16px; font-weight: 700; line-height: 1.3; color: #171717; margin: 0 0 3px;
	transition: color .3s ease;
}
.k9zz__feat:hover .k9zz__ftitle { color: var(--k9-gold); }
.k9zz__ftext, .k9zz__ftext p { font-size: 14px; line-height: 1.5; color: #666; margin: 0; }

/* Button */

/* Stacked rows: remove double gap between repeated widgets */
.elementor-widget-k9_zigzag + .elementor-widget-k9_zigzag { margin-top: 0; }

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 1366px) {
	.k9zz__title { font-size: 38px; }
	.k9zz__features { column-gap: 24px; }
}

@media (max-width: 1024px) {
	.k9zz { --k9-img-w: 40%; --k9-notch: 50px; min-height: 0; }
	.k9zz__content, .k9zz--img-right .k9zz__content { padding: 50px 30px; }
	.k9zz__title { font-size: 32px; }
	.k9zz__features { grid-template-columns: 1fr; }
	.k9zz__wm { font-size: 200px; }
	.k9zz__wm svg { width: 200px; height: 200px; }
}

@media (max-width: 767px) {
	.k9zz, .k9zz--img-right { flex-direction: column; }
	.k9zz--m-img-first, .k9zz--m-img-first.k9zz--img-right { flex-direction: column; }
	.k9zz:not(.k9zz--m-img-first) { flex-direction: column-reverse; }
	.k9zz__media {
		flex: none; max-width: 100%; width: 100%; min-height: 280px;
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 50% 100%, 0 calc(100% - 30px)) !important;
	}
	.k9zz:not(.k9zz--m-img-first) .k9zz__media {
		clip-path: polygon(0 30px, 50% 0, 100% 30px, 100% 100%, 0 100%) !important;
	}
	.k9zz__chev { display: none; }
	.k9zz__content, .k9zz--img-right .k9zz__content { padding: 36px 16px 46px; }
	.k9zz--img-left .k9zz__content-in { margin-left: 0; }
	.k9zz__sub { font-size: 12px; letter-spacing: 1.8px; }
	.k9zz__title { font-size: 28px; }
	.k9zz__desc { font-size: 15px; }
	.k9zz__features { row-gap: 18px; }
	.k9zz__fic { flex-basis: 46px; width: 46px; height: 46px; font-size: 18px; }
	.k9zz__btn { width: 100%; }
	.k9zz__wm { font-size: 150px; right: -20px !important; top: auto; bottom: 10px; transform: none; }
	.k9zz__wm svg { width: 150px; height: 150px; }
}
