/* ==========================================================
   K9 Paw – FAQ Accordion widget
   ========================================================== */
.k9fq {
	--k9-gold: #DCA54A;
	--k9-left: 43%;
	position: relative;
	overflow: hidden;
	background: linear-gradient(120deg, #faf7f1 0%, #f6f0e6 100%);
	font-family: var(--k9-font, 'Roboto', sans-serif);
	color: #555;
}
.k9fq *, .k9fq *::before, .k9fq *::after { box-sizing: border-box; }

/* Bottom-left image (inside left column, bleeds to the edge) */
.k9fq__img {
	position: relative; z-index: 0;
	margin: 30px 0 -40px -90px;
	width: calc(100% + 90px); height: 460px;
	clip-path: polygon(0 12%, 10% 0, 42% 0, 100% 100%, 0 100%);
}
.k9fq__img img { width: 100%; height: 100% !important; max-width: none; object-fit: cover; object-position: left center; display: block; transition: transform 1.2s ease; }
.k9fq:hover .k9fq__img img { transform: scale(1.04); }
.k9fq__img-line {
	position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(to bottom left, transparent calc(50% - 3px), var(--k9-gold) calc(50% - 3px), var(--k9-gold) calc(50% + 2px), transparent calc(50% + 2px));
	clip-path: polygon(42% 0, 100% 0, 100% 100%);
}

.k9fq__inner {
	position: relative; z-index: 1;
	max-width: 1440px; margin: 0 auto;
	padding: 60px 60px 40px 90px;
	display: grid;
	grid-template-columns: var(--k9-left) minmax(0, 1fr);
	grid-template-areas: "left acc" "left cta";
	column-gap: 60px; row-gap: 40px;
	align-items: start;
}

/* ---------- Left ---------- */
.k9fq__left { grid-area: left; display: flex; flex-direction: column; }
.k9fq--img .k9fq__left { align-self: stretch; }
.k9fq__img { flex: 1 1 auto; min-height: 320px; }
.k9fq__sub { font-size: 16px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: #b98633; margin-bottom: 14px; }
.k9fq__title {
	font-family: var(--k9-font, 'Roboto', sans-serif);
	font-size: 50px; font-weight: 800; line-height: 1.1; color: #111; margin: 0 0 20px;
}
.k9fq__title em { font-style: normal; color: var(--k9-gold); }
.k9fq__desc { font-size: 19px; line-height: 1.4; color: #555; margin-bottom: 24px; }
.k9fq__desc p { margin: 0 0 8px; color: inherit; font: inherit; }
.k9fq__desc p:last-child { margin: 0; }

.k9fq__feats { display: flex; }
.k9fq__feat {
	flex: 1 1 0; display: flex; flex-direction: column; align-items: center; text-align: center;
	padding: 0 18px;
}
.k9fq__feat + .k9fq__feat { border-left: 1px solid rgba(0,0,0,.1); }
.k9fq__fic {
	width: 68px; height: 68px; margin-bottom: 12px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: #f6dfae; color: #1a1a1a; font-size: 28px;
	transition: transform .4s ease, background .4s ease, color .4s ease;
}
.k9fq__fic svg { width: 28px; height: 28px; fill: currentColor; }
.k9fq__feat:hover .k9fq__fic { transform: translateY(-4px) rotate(-8deg); background: #171717; color: var(--k9-gold); }
.k9fq__ftitle { font-size: 16px; font-weight: 700; color: #111; line-height: 1.3; }
.k9fq__ftext { margin-top: 4px; font-size: 14px; color: #666; line-height: 1.35; }

/* ---------- Accordion ---------- */
.k9fq__acc { grid-area: acc; display: flex; flex-direction: column; gap: 12px; }
.k9fq__item {
	background: #fcfaf6; border-radius: 6px; overflow: hidden;
	box-shadow: 0 8px 22px rgba(60,40,0,.06);
	border: 1px solid transparent;
	transition: box-shadow .3s ease, border-color .3s ease;
}
.k9fq__item:hover { border-color: rgba(220,165,74,.4); box-shadow: 0 12px 28px rgba(60,40,0,.1); }
.k9fq__h { margin: 0; font-size: inherit; }
.k9fq__q {
	width: 100%; display: flex; align-items: center; gap: 26px;
	padding: 14px 22px; min-height: 66px;
	background: transparent; border: 0; cursor: pointer; text-align: left;
	font-family: var(--k9-font, 'Roboto', sans-serif) !important;
	transition: background-color .35s ease;
}
.k9fq__q:focus-visible { outline: 2px solid var(--k9-gold); outline-offset: -2px; }
.k9fq__num {
	flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: radial-gradient(circle at 35% 30%, #f0c46d, var(--k9-gold) 75%);
	color: #fff; font-size: 17px; font-weight: 600;
}
.k9fq__q-text { flex: 1; font-size: 19px; font-weight: 700; line-height: 1.3; color: #111; transition: color .3s ease; }
.k9fq__q:hover .k9fq__q-text { color: #a87929; }
.k9fq__tog {
	position: relative; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%;
	border: 1.5px solid #111; color: #111; font-size: 14px;
	display: inline-flex; align-items: center; justify-content: center;
	transition: transform .35s ease, border-color .3s ease, color .3s ease, background-color .3s ease;
}
.k9fq__tog svg { width: 14px; height: 14px; fill: currentColor; }
.k9fq__tog-o, .k9fq__tog-c { position: absolute; display: inline-flex; transition: opacity .25s ease, transform .35s ease; }
.k9fq__tog-c { opacity: 0; transform: rotate(-90deg); }
.k9fq__q:hover .k9fq__tog { background-color: var(--k9-gold); border-color: var(--k9-gold); }

/* open state */
.k9fq__item.is-open .k9fq__q { background-color: #111; }
.k9fq__item.is-open .k9fq__q-text { color: #fff; }
.k9fq__item.is-open .k9fq__tog { border-color: var(--k9-gold); color: var(--k9-gold); background: transparent; }
.k9fq__item.is-open .k9fq__tog-o { opacity: 0; transform: rotate(90deg); }
.k9fq__item.is-open .k9fq__tog-c { opacity: 1; transform: none; }
.k9fq__item.is-open { border-color: rgba(220,165,74,.35); }

/* smooth height animation */
.k9fq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease; }
.k9fq__item.is-open .k9fq__a { grid-template-rows: 1fr; }
.k9fq__a-wrap { overflow: hidden; }
.k9fq__a-in { padding: 20px 26px 22px; font-size: 16px; line-height: 1.45; color: #555; }
.k9fq__a-in p { margin: 0 0 8px; color: inherit; font: inherit; }
.k9fq__a-in p:last-child { margin: 0; }

/* ---------- CTA bar ---------- */
.k9fq__cta {
	grid-area: cta; position: relative; overflow: hidden;
	align-self: end; z-index: 2;
	margin-left: -30%;
	display: flex; align-items: center; gap: 30px;
	padding: 22px 150px 22px 34px;
	background: linear-gradient(100deg, #0f0d0a 0%, #15120d 60%, #2a2116 100%);
	border-radius: 6px; color: #fff;
	box-shadow: 0 18px 40px rgba(0,0,0,.18);
}
.k9fq__cta-ic {
	flex: none; width: 70px; height: 70px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,.04); color: var(--k9-gold); font-size: 30px;
}
.k9fq__cta-ic svg { width: 30px; height: 30px; fill: currentColor; }
.k9fq__cta-tx { flex: 1; min-width: 0; }
.k9fq__cta-title { font-family: var(--k9-font, 'Roboto', sans-serif); font-size: 28px; font-weight: 700; color: #fff; margin: 0 0 6px; }
.k9fq__cta-text { font-size: 16px; color: rgba(255,255,255,.85); margin: 0; }
.k9fq__btn { flex: none; position: relative; z-index: 1; min-width: 260px; }
.k9fq__cta-wm { position: absolute; right: 10px; bottom: -14px; font-size: 110px; line-height: 1; color: rgba(220,165,74,.14); pointer-events: none; }
.k9fq__cta-wm svg { width: 110px; height: 110px; fill: currentColor; }

@media (prefers-reduced-motion: reduce) {
	.k9fq__a, .k9fq__tog, .k9fq__tog-o, .k9fq__tog-c, .k9fq__img img { transition: none !important; }
}

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 1366px) {
	.k9fq__inner { padding: 50px 40px 36px 50px; column-gap: 40px; }
	.k9fq__title { font-size: 44px; }
	.k9fq__desc { font-size: 17px; }
	.k9fq__feats { margin-left: 0; }
	.k9fq__q-text { font-size: 17px; }
	.k9fq__cta { margin-left: -20%; padding-right: 120px; }
	.k9fq__img { margin-left: -50px; width: calc(100% + 50px); }
	.k9fq__cta-title { font-size: 24px; }
}

@media (max-width: 1024px) {
	.k9fq__inner {
		grid-template-columns: 1fr;
		grid-template-areas: "left" "acc" "cta";
		padding: 50px 30px; row-gap: 36px;
	}
	.k9fq__title { font-size: 38px; }
	.k9fq__img { display: none; }
	.k9fq__left { align-self: start; }
	.k9fq__cta { margin-left: 0; padding: 24px 28px; flex-wrap: wrap; }
	.k9fq__cta-wm { display: none; }
}

@media (max-width: 767px) {
	.k9fq--img-m .k9fq__img {
		display: block; position: relative; width: calc(100% + 32px); height: 240px; min-height: 0; margin: 24px -16px 0;
		clip-path: polygon(0 0, 100% 12%, 100% 100%, 0 100%);
	}
	.k9fq--img-m .k9fq__img-line { display: none; }
	.k9fq__inner { padding: 44px 16px 50px; row-gap: 30px; }
	.k9fq__sub { font-size: 13px; }
	.k9fq__title { font-size: 30px; }
	.k9fq__desc { font-size: 15px; }
	.k9fq__feats { flex-direction: column; gap: 14px; }
	.k9fq__feat, .k9fq__feat + .k9fq__feat {
		display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; align-items: center;
		text-align: left; padding: 0; border-left: 0;
	}
	.k9fq__fic { grid-row: span 2; width: 52px; height: 52px; margin: 0; font-size: 22px; }
	.k9fq__fic svg { width: 22px; height: 22px; }
	.k9fq__ftitle { align-self: end; }
	.k9fq__ftext { align-self: start; margin-top: 2px; }
	.k9fq__acc { gap: 10px; }
	.k9fq__q { gap: 14px; padding: 12px 14px; min-height: 58px; }
	.k9fq__num { flex-basis: 32px; width: 32px; height: 32px; font-size: 14px; }
	.k9fq__q-text { font-size: 15px; }
	.k9fq__tog { flex-basis: 32px; width: 32px; height: 32px; font-size: 12px; }
	.k9fq__a-in { padding: 16px 16px 18px; font-size: 14.5px; }
	.k9fq__cta { flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px 20px; }
	.k9fq__cta-ic { width: 56px; height: 56px; font-size: 24px; }
	.k9fq__cta-title { font-size: 22px; }
	.k9fq__cta-text { font-size: 14.5px; }
	.k9fq__btn { width: 100%; min-width: 0; }
}