/* KB Recommendations — SHARED component layer (review M11).
   One flag-independent stylesheet: every surface (concierge drawer, PDP/cart
   strips, My Recommendations page) enqueues it directly, so no feature flag
   can starve another surface of the component contract. Surface files hold
   only their own layout overrides. All rules scoped under .kb-recs-* roots.

   Palette (WCAG ratios computed, not eyeballed — review U08):
     --kb-green  #2e7d32  white on it = 5.13:1   (replaces #40a628 @ 3.13 FAIL)
     --kb-deep   #1a3c34  white on it = 12.07:1  (user chat bubbles, Choose)
     --kb-ink    #22302b  on white = 13.76:1     (primary text)
     --kb-sub    #5f6368  on white = 6.05:1      (secondary text; #777 was 4.48 FAIL)
     pill amber  #5d4037 on #fff8e1 = 8.77:1
     pill green  #1b5e20 on #e8f5e9 = 6.99:1
     chip drop   #7a4a1d on #faf3ec = 5.5:1
   Type scale (review U06): 16 input/body · 14-16 titles · 16-20 prices · 12-13 secondary.
   Spacing scale: 4 / 8 / 12 / 16 / 24 / 32. Targets: 44×44 CSS px (review U07).
   Radii: 10–14px cards/inputs (review M09). */

.kb-recs-fab, .kb-recs-drawer, .kb-recs-strips {
	--kb-green: #2e7d32;
	--kb-deep: #1a3c34;
	--kb-ink: #22302b;
	--kb-sub: #5f6368;
	--kb-line: #e3e8e2;
}

/* ---------- section heads + pills (theme-heading resets live here, U09) ---------- */
.kb-recs-pill { font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 10px; text-transform: uppercase; background: #fff8e1; color: #5d4037; border: 1px solid #f9a825; }
.kb-recs-pill.kb-recs-pill-new { background: #e8f5e9; color: #1b5e20; border-color: #a5d6a7; }

/* ---------- rails (native scroll + proximity snap; rails.js owns controls) ---------- */
.kb-recs-drawer ul.kb-recs-rail, .kb-recs-strips ul.kb-recs-rail { list-style: none; margin: 0; padding: 0 0 10px; }
.kb-recs-drawer .kb-recs-rail, .kb-recs-strips .kb-recs-rail {
	display: flex; gap: 8px; overflow-x: auto; margin: 0;
	scroll-snap-type: x proximity; /* rails.js disables this mid-tween — no snap fight (U19) */
	touch-action: pan-x pan-y; /* horizontal scroll + vertical page scroll + pinch all stay native (U02) */
	scrollbar-width: none;
}
.kb-recs-strips .kb-recs-rail { gap: 12px; }
.kb-recs-drawer .kb-recs-rail::-webkit-scrollbar, .kb-recs-strips .kb-recs-rail::-webkit-scrollbar { display: none; }
.kb-recs-drawer .kb-recs-rail > .kb-recs-li, .kb-recs-strips .kb-recs-rail > .kb-recs-li { margin: 0; padding: 0; display: flex; scroll-snap-align: start; }
.kb-recs-rail img { -webkit-user-drag: none; } /* HTML5 ghost-drag must not fight mouse-drag scrolling */
.kb-recs-railwrap:not(.kb-recs-nooverflow) .kb-recs-rail { cursor: grab; }
.kb-recs-rail.kb-recs-dragging { cursor: grabbing !important; user-select: none; }

/* ---------- product card contract (M07): image, distinguishing title, matched
   amount, exact price, concise evidence, action — same across surfaces. ------ */
.kb-recs-card {
	border: 1px solid var(--kb-line); border-radius: 12px; overflow: hidden;
	background: #fff; display: flex; flex-direction: column; flex: 1;
}
.kb-recs-card .kb-recs-image-link { display: block; flex: none; text-decoration: none; }
.kb-recs-card img { width: 100%; aspect-ratio: 5/6; object-fit: cover; display: block; background: #eef1ec; }
.kb-recs-card .kb-recs-b { padding: 8px 10px 10px; display: flex; flex-direction: column; flex: 1; }
.kb-recs-reason { font-size: 12px; font-weight: 600; border-radius: 4px; padding: 3px 8px; display: inline-block; margin-bottom: 4px; align-self: flex-start; background: #fff8e1; color: #5d4037; }
.kb-recs-reason.kb-recs-reason-new { background: #e8f5e9; color: #1b5e20; }
.kb-recs-meta { font-size: 12px; color: var(--kb-sub); margin-bottom: 1px; }
.kb-recs-nm { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--kb-ink); }
.kb-recs-pr { color: var(--kb-green); font-weight: 700; font-size: 14px; margin-top: 2px; }
.kb-recs-pr del { color: var(--kb-sub); font-weight: 400; margin-right: 4px; }
.kb-recs-pr .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }
.kb-recs-from { font-weight: 400; color: var(--kb-sub); font-size: .85em; }
.kb-recs-spacer { flex: 1; min-height: 4px; }

/* Button AND link share one box — font/line-height/box-sizing normalized so
   "+ Add" (button) and "Choose" (anchor) align pixel-for-pixel. */
.kb-recs-btn {
	width: 100%; margin: 8px 0 0; border: 0; border-radius: 10px; cursor: pointer;
	background: var(--kb-green); color: #fff; padding: 10px 0; min-height: 44px; /* U07 */
	font: inherit; font-size: 14px; font-weight: 700; line-height: 1.2;
	box-sizing: border-box; text-align: center; text-decoration: none; display: block;
	text-transform: none; /* Flatsome uppercases <button> globally */
}
.kb-recs-btn[disabled] { opacity: .55; cursor: default; }
.kb-recs-btn.kb-recs-btn-choose { background: var(--kb-deep); }
.kb-recs-details {
	display: block; text-align: center; margin-top: 2px; padding: 10px 4px; min-height: 44px; /* U07 */
	box-sizing: border-box; font-size: 13px; font-weight: 600; color: var(--kb-deep); text-decoration: underline;
	text-underline-offset: 2px; border-radius: 8px;
}

/* ---------- rail controls (markup from kb-recs-rails.js) ---------- */
.kb-recs-railwrap { position: relative; margin: 0 0 24px; } /* 8 gap + 16 for the dots row */
.kb-recs-railwrap.kb-recs-nooverflow { margin-bottom: 8px; }
.kb-recs-arrow {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
	width: 44px; height: 44px; border-radius: 50%; cursor: pointer; padding: 0; margin: 0; min-height: 0;
	background: #fff; border: 1px solid #d9e0d8; box-shadow: 0 2px 10px rgba(0,0,0,.16);
	color: var(--kb-deep); display: flex; align-items: center; justify-content: center;
	text-transform: none;
}
.kb-recs-prev { left: -6px; }
.kb-recs-next { right: -6px; }
.kb-recs-arrow[disabled] { opacity: .35; cursor: default; box-shadow: none; }
.kb-recs-nooverflow .kb-recs-arrow, .kb-recs-nooverflow .kb-recs-dots { display: none; }
.kb-recs-dots {
	position: absolute; left: 0; right: 0; bottom: -16px; height: 8px;
	display: flex; gap: 6px; align-items: center; justify-content: center;
}
.kb-recs-dot { width: 6px; height: 6px; border-radius: 50%; background: #cfd8cf; transition: background .15s ease; }
.kb-recs-dot.kb-recs-dot-on { background: var(--kb-deep); }
/* Visible "Items X–Y of N" (M05) — right end of the dots row. Empty when the
   rail does not overflow, so it can never say "1 of 1". */
.kb-recs-rail-pos { position: absolute; right: 2px; bottom: -19px; font-size: 12px; line-height: 16px; color: var(--kb-sub); white-space: nowrap; }
/* Continuation cue: a fade on the edge that still has products behind it. */
.kb-recs-railwrap::after {
	content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 32px;
	pointer-events: none; opacity: 0; transition: opacity .15s ease;
	background: linear-gradient(90deg, rgba(255,255,255,0), #fff);
}
.kb-recs-railwrap:not(.kb-recs-at-end):not(.kb-recs-nooverflow)::after { opacity: 1; }
.kb-recs-visually-hidden {
	position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap;
}

/* ---------- composer (M02: ONE row — input + Find; M11: theme normalization) ---------- */
.kb-recs-row { display: flex; gap: 8px; }
.kb-recs-drawer form.kb-recs-row, .kb-recs-strips-page form.kb-recs-row { margin: 0; padding: 0; } /* theme adds form margins */
.kb-recs-row input.kb-recs-in {
	flex: 1; min-width: 0; margin: 0; border: 1px solid #91a797; border-radius: 12px; /* beats Flatsome's square/white inputs (U09) */
	padding: 10px 14px !important; /* Flatsome input padding overrides ours otherwise */
	height: 48px; box-sizing: border-box; /* scoped: Flatsome's input[type=text] height ties an unscoped class rule and wins on load order */
	font-size: 16px; line-height: 1.4; color: var(--kb-ink, #22302b); background-color: #fff;
	box-shadow: none; text-transform: none; letter-spacing: normal;
}
input.kb-recs-in::placeholder { color: var(--kb-sub, #5f6368); opacity: 1; }
.kb-recs-in:focus { border-color: var(--kb-deep, #1a3c34); outline: none; }
.kb-recs-in:disabled { opacity: .6; cursor: wait; }
.kb-recs-send {
	height: 48px; min-width: 64px; flex: none; border: 0; border-radius: 12px; cursor: pointer; padding: 0 16px; margin: 0;
	background: var(--kb-deep, #1a3c34); color: #fff; font-size: 14px; font-weight: 700;
	display: inline-flex; align-items: center; justify-content: center;
	text-transform: none;
}
.kb-recs-send:disabled { opacity: .6; cursor: wait; }
.kb-recs-composer-label { display: block; font-size: 13px; font-weight: 600; color: #3c4043; margin: 0 0 8px; }

/* Hints: one scrollable row — wrapping filled 111px of drawer height (U04).
   They live in the empty-state body (M02), never in the composer footer. */
.kb-recs-hints {
	display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px;
	margin: 8px 0; padding: 2px 2px 4px; scrollbar-width: none;
}
.kb-recs-hints::-webkit-scrollbar { display: none; }
.kb-recs-hint {
	flex: none; font-size: 12px; white-space: nowrap; border: 1px solid #d9e0d8; border-radius: 999px;
	padding: 8px 14px; margin: 0; min-height: 44px; color: #3c4043; background: #fff; cursor: pointer;
	display: inline-flex; align-items: center;
	text-transform: none;
}
.kb-recs-hint:hover { border-color: var(--kb-green); color: var(--kb-deep); }

/* ---------- chat answer cards (M04/M07): vertical compact rows; the card
   shows the EXACT matched offer ("28g · $80"), never a From-range (N05). ----- */
.kb-recs-chat-items { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 8px; }
.kb-recs-chat-items .kb-recs-card { min-width: 0; max-width: none; flex-direction: row; align-items: stretch; }
.kb-recs-chat-items .kb-recs-card > img { width: 84px; height: auto; min-height: 84px; align-self: stretch; /* no aspect-ratio: it fought flex stretch into 84×197 letterboxes; stretch + cover fills the row */ object-fit: cover; display: block; background: #eef1ec; flex: none; }
.kb-recs-chat-items .kb-recs-card .kb-recs-b { padding: 9px 11px; display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 1px; }
.kb-recs-chat-items .kb-recs-nm {
	font-size: 14px; line-height: 1.25;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; /* full name, 2-line clamp (U05) */
}
.kb-recs-chat-items .kb-recs-pr { color: var(--kb-ink); font-size: 16px; font-weight: 750; margin-top: 1px; }
.kb-recs-chat-items .kb-recs-pr del { font-size: 13px; }
.kb-recs-chat-items .kb-recs-spacer { min-height: 2px; }
.kb-recs-chat-items .kb-recs-btn { display: inline-block; width: auto; margin: 6px 0 0; padding: 8px 16px; min-height: 44px; }
.kb-recs-chat-items .kb-recs-details { display: inline-block; margin: 6px 0 0 10px; padding: 8px 6px; min-height: 44px; }

/* ---------- exact offer / effective-query chips / consent relaxation (N05/N06) ---------- */
.kb-recs-offer { font-size: 13px; font-weight: 600; color: var(--kb-ink, #22302a); margin: 2px 0 0; }
.kb-recs-qmeta { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.kb-recs-qchip { font-size: 12px; line-height: 1; padding: 6px 10px; border-radius: 999px; background: #eef3ee; color: #22302a; border: 1px solid #d8e2d8; }
.kb-recs-qchip-dropped { background: #faf3ec; border-color: #e6d3c0; color: #7a4a1d; text-decoration: line-through; text-decoration-thickness: 1px; }
.kb-recs-relax { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.kb-recs-relax-btn {
	min-height: 44px; padding: 10px 16px; margin: 0; font-size: 14px; font-weight: 600;
	border-radius: 999px; border: 1.5px solid #1a3c34; background: #fff;
	color: #1a3c34; cursor: pointer; text-transform: none;
}
.kb-recs-relax-btn:hover { background: #eef3ee; }

/* ---------- shared states ---------- */
.kb-recs-empty { font-size: 14px; color: var(--kb-sub, #5f6368); text-align: center; padding: 24px 10px; }
.kb-recs-clear {
	display: inline-block; margin: 10px 0 0 auto; padding: 8px 16px; min-height: 44px;
	border: 1px solid #d9e0d8; border-radius: 999px; background: #fff;
	color: var(--kb-deep, #1a3c34); font-size: 13px; font-weight: 600; cursor: pointer;
	text-transform: none;
}
.kb-recs-clear:hover { border-color: var(--kb-green, #2e7d32); }

/* ---------- focus visibility (WCAG 2.4.7) on every interactive element ---------- */
.kb-recs-fab:focus-visible,
.kb-recs-x:focus-visible,
.kb-recs-send:focus-visible,
.kb-recs-hint:focus-visible,
.kb-recs-btn:focus-visible,
.kb-recs-details:focus-visible,
.kb-recs-image-link:focus-visible,
.kb-recs-arrow:focus-visible,
.kb-recs-newreply:focus-visible,
.kb-recs-retry:focus-visible,
.kb-recs-clear:focus-visible,
.kb-recs-relax-btn:focus-visible,
.kb-recs-rail:focus-visible,
.kb-recs-in:focus-visible {
	outline: 2.5px solid #2e7d1e; /* 5.16:1 on white — non-text ≥3:1 */
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.kb-recs-dot { transition: none; }
	.kb-recs-railwrap::after { transition: none; }
}

/* Review candidate: normalize the complete control box, including anchor text.
   Min-height alone leaves the label stuck at the top of a tall theme button. */
.kb-recs-drawer .kb-recs-btn, .kb-recs-strips .kb-recs-btn {
    display: flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 10px 12px; margin: 8px 0 0;
    font-size: 14px; line-height: 1.25; letter-spacing: normal;
    text-transform: none; text-decoration: none; white-space: normal;
}
.kb-recs-drawer, .kb-recs-drawer *, .kb-recs-strips-page, .kb-recs-strips-page * { box-sizing: border-box; }
.kb-recs-drawer .kb-recs-rail, .kb-recs-strips .kb-recs-rail { touch-action: auto; }
.kb-recs-railwrap:not(.kb-recs-nooverflow) .kb-recs-rail { cursor: auto; }
.kb-recs-chat-items .kb-recs-card { align-items: flex-start; padding: 12px; gap: 12px; }
.kb-recs-chat-items .kb-recs-card > img {
    width: 80px; height: 80px; min-height: 0; aspect-ratio: 1;
    align-self: flex-start; object-fit: contain; border-radius: 8px;
}
.kb-recs-chat-items .kb-recs-card .kb-recs-b { padding: 0; gap: 4px; }
.kb-recs-chat-items .kb-recs-nm { display: block; overflow: visible; -webkit-line-clamp: unset; line-height: 1.4; }
.kb-recs-chat-items .kb-recs-card .kb-recs-btn { width: auto; align-self: flex-start; padding-inline: 16px; }
.kb-recs-chat-items .kb-recs-spacer { display: none; }
.kb-recs-card .kb-recs-pr { line-height: 1.4; }
.kb-recs-pagination { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin: 16px 0; }
.kb-recs-pagination .kb-recs-page-count { font-size: 13px; }
.kb-recs-pagination button:disabled { opacity: .45; cursor: default; }
.kb-recs-searching > :not(#kbRecsChatlog):not(.kb-recs-clear) { display: none; }
.kb-recs-searching .kb-recs-chatlog { padding: 0; margin: 8px 0; border: 0; }
.kb-recs-searching .kb-recs-bot { max-width: none; padding: 0; border: 0; background: transparent; border-radius: 0; }
/* Avoid piling dots and item-position text into a 320 px-wide footer. */
.kb-recs-dots { display: none; }
.kb-recs-prev { left: 8px; }
.kb-recs-next { right: 8px; }
.kb-recs-drawer .kb-recs-send, .kb-recs-strips-page .kb-recs-send { min-height: 48px; line-height: 1.25; letter-spacing: normal; margin: 0; }
.kb-recs-drawer .kb-recs-hint, .kb-recs-strips-page .kb-recs-hint,
.kb-recs-relax-btn, .kb-recs-clear { line-height: 1.25; letter-spacing: normal; }

/* Author display rules must respect hidden, including after a completed query. */
.kb-recs-hints[hidden], .kb-recs-drawer-empty-hints[hidden] { display: none; }
.kb-recs-drawer .kb-recs-searching .kb-recs-msg.kb-recs-bot {
    padding: 0; border: 0; background: transparent; border-radius: 0;
    max-width: none; margin: 0 0 10px;
}
.kb-recs-drawer .kb-recs-searching .kb-recs-clear { margin-top: 0; }

/* Keep the linked image focus ring visible inside the clipped card. */
.kb-recs-image-link:focus-visible { outline-offset: -3px; }