/*
 * [ncllc_reviews] — the look of Smash Balloon Reviews Feed Pro feed 4 (settings read
 * 2026-10-18; card https://trello.com/c/1ScoZgjp). Every value below is that feed's, so
 * the page looks the same after the plugin is gone; the parity e2e compares the two.
 * The feed's own colors are the theme's (the store's theme is light-only).
 */
#sb-reviews-container-ncllc {
	--ncllc-rv-gutter: 10px;
	--ncllc-rv-ink: #141B38;
	--ncllc-rv-muted: #434960;
	--ncllc-rv-accent: #0096CC;
	--ncllc-rv-accent-hover: #CC3F3A;
	--ncllc-rv-rule: #eee;
	--ncllc-rv-button-bg: #E6E6EB;
}
#sb-reviews-container-ncllc .sb-feed-container svg { height: unset; max-width: unset; }
#sb-reviews-container-ncllc .sb-fs { width: 100%; position: relative; float: left; box-sizing: border-box; }
#sb-reviews-container-ncllc .sb-relative { position: relative; }
#sb-reviews-container-ncllc .sb-feed-header::after,
#sb-reviews-container-ncllc .sb-post-item::after,
#sb-reviews-container-ncllc .sb-feed-posts::after { display: table; content: ""; clear: both; }

/* ── Header: the average, its stars, "Over N Reviews", and "Write a Review" ── */
#sb-reviews-container-ncllc .sb-feed-header { padding: 0; margin: 0 0 20px 0; }
#sb-reviews-container-ncllc .sb-feed-header-bottom { padding: 0; margin: 0; }
#sb-reviews-container-ncllc .sb-feed-header-bottom > div { display: inline-block; }
#sb-reviews-container-ncllc .sb-feed-header-average { display: inline-flex !important; align-items: center; float: left; }
#sb-reviews-container-ncllc .sb-feed-header-btn-ctn { float: right; }
#sb-reviews-container-ncllc .sb-feed-header-rating { font-weight: 600; font-size: 20px; line-height: 1.5em; color: var(--ncllc-rv-ink); margin-right: 6px; }
/* Smash Balloon 2.15.1's header stars (sbr-styles.min.css, read 2026-10-18): an inline-flex row, 18px stars 2px apart. */
#sb-reviews-container-ncllc .sb-feed-header-rating-icons { color: var(--ncllc-rv-accent); display: inline-flex; justify-content: center; margin: 0 5px; line-height: 1; }
#sb-reviews-container-ncllc .sb-feed-header-icon svg { fill: currentColor; display: inline-flex; width: 18px; height: 18px; margin: 0 2px; }
#sb-reviews-container-ncllc .sb-feed-header-rating-subtext { font-weight: 400; font-size: 12px; line-height: 1.5em; color: var(--ncllc-rv-muted); margin-left: 8px; }

/* ── Buttons ── */
#sb-reviews-container-ncllc .sb-btn {
	align-items: center; border: 0; border-radius: 4px; cursor: pointer; display: flex; justify-content: center;
	outline: 0; position: relative; transition: all .15s ease-in-out; font-weight: 600;
	box-shadow: 0 2px 5px rgb(60 66 87 / 5%), 0 1px 1px rgb(0 0 0 / 5%), inset 0 -1px 1px rgb(0 0 0 / 12%);
}
#sb-reviews-container-ncllc .sb-btn:active { transform: scale(.98); }
#sb-reviews-container-ncllc .sb-btn:focus-visible,
#sb-reviews-container-ncllc .sb-expand button:focus-visible,
#sb-reviews-container-ncllc a.sb-single-image:focus-visible { outline: 2px solid var(--ncllc-rv-ink); outline-offset: 2px; }
#sb-reviews-container-ncllc a.sb-feed-header-btn {
	text-decoration: none; flex-direction: row; font-size: 14px; line-height: 22px; padding: 8px 20px 8px 12px; margin: 0;
	color: #ffffff; background: var(--ncllc-rv-accent);
}
#sb-reviews-container-ncllc a.sb-feed-header-btn:hover { color: #ffffff; background: var(--ncllc-rv-accent-hover); }
#sb-reviews-container-ncllc .sb-btn-icon { margin-right: 7px; display: inline-flex; }
#sb-reviews-container-ncllc .sb-btn-icon svg { width: 17px; height: auto; float: left; background: #fff; border-radius: 50%; padding: 1px; }
#sb-reviews-container-ncllc .sb-load-button-ctn { position: relative; clear: both; margin: 20px 0 0 0; }
#sb-reviews-container-ncllc .sb-load-button {
	width: 100%; height: auto; padding: 15px 0; font-weight: 600; font-size: 16px; line-height: 1em;
	color: var(--ncllc-rv-ink); background: var(--ncllc-rv-button-bg);
}
#sb-reviews-container-ncllc .sb-load-button:hover { color: #ffffff; background: var(--ncllc-rv-accent); }
#sb-reviews-container-ncllc .sb-load-button[disabled] { cursor: progress; opacity: .7; }

/* ── The reviews (masonry: assets/reviews.js places them; before it runs they stack) ── */
#sb-reviews-container-ncllc .sb-feed-posts { position: relative; }
#sb-reviews-container-ncllc .sb-post-item-wrap {
	width: 100%; float: left; box-sizing: border-box;
	margin-bottom: 20px !important; padding: 0 0 20px 0; border-bottom: 1px solid var(--ncllc-rv-rule);
}
#sb-reviews-container-ncllc .sb-feed-posts.is-masonry .sb-post-item-wrap { position: absolute; float: none; }
#sb-reviews-container-ncllc .sb-post-item { position: relative; }
#sb-reviews-container-ncllc .sb-item-provider-icon { position: absolute; width: 24px; height: 24px; right: 10px; top: 10px; }
#sb-reviews-container-ncllc .sb-item-provider-icon svg { width: 24px; height: 24px; float: left; }
#sb-reviews-container-ncllc .sb-item-author-date-ctn { padding-right: 34px; }
#sb-reviews-container-ncllc .sb-item-author-ctn { display: flex; align-items: flex-start; float: left; padding: 0; margin: 0; }
#sb-reviews-container-ncllc .sb-item-author-img { margin: 0 10px 0 0; }
#sb-reviews-container-ncllc .sb-item-author-img,
#sb-reviews-container-ncllc .sb-item-author-img img { width: 56px; min-width: 56px; height: 56px; border-radius: 50px; }
#sb-reviews-container-ncllc .sb-item-author-img img { float: left; object-fit: cover; object-position: center center; }
#sb-reviews-container-ncllc .sb-item-name-date span { display: block; width: 100%; }
#sb-reviews-container-ncllc .sb-item-author-name { font-weight: 600; font-size: 14px; line-height: 1.5em; color: var(--ncllc-rv-ink); padding: 0; margin: 0; }
#sb-reviews-container-ncllc .sb-item-author-date { font-weight: 400; font-size: 13px; line-height: 1.5em; color: var(--ncllc-rv-muted); padding: 0; margin: 0; }
#sb-reviews-container-ncllc .sb-item-rating { display: flex; align-items: center; color: var(--ncllc-rv-accent); padding: 0; margin: 15px 0; }
#sb-reviews-container-ncllc .sb-item-rating-ctn { display: inline-flex; }
#sb-reviews-container-ncllc .sb-item-rating-icon svg { fill: currentColor; margin: 0 2px; float: left; width: 16px; height: 16px; }
#sb-reviews-container-ncllc .sb-star-empty { opacity: .3; }
#sb-reviews-container-ncllc .sb-item-text { font-weight: 400; font-size: 16px; line-height: 1.5em; color: var(--ncllc-rv-muted); padding: 0; margin: 0; overflow-wrap: anywhere; }
#sb-reviews-container-ncllc .sb-expand { display: inline-block; }
#sb-reviews-container-ncllc .sb-expand button {
	appearance: none; border: 0; background: 0 0; padding: 0; margin: 0; font: inherit; line-height: inherit;
	color: inherit; cursor: pointer; vertical-align: baseline; box-sizing: border-box; min-height: 24px; min-width: 24px;
}
#sb-reviews-container-ncllc .sb-more { margin-left: 6px; }
#sb-reviews-container-ncllc .sb-media-wrap { width: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap; margin-top: 15px; gap: 8px; }
#sb-reviews-container-ncllc .sb-media-placeholder { clear: both; }
#sb-reviews-container-ncllc .sb-single-image { position: relative; background-position: center center; background-size: cover; }
#sb-reviews-container-ncllc .sb-single-image,
#sb-reviews-container-ncllc .sb-single-image img { height: 64px; width: 64px; border-radius: 5px; }
#sb-reviews-container-ncllc .sb-single-image img { opacity: 0; visibility: hidden; }
#sb-reviews-container-ncllc .sb-thumbnail-hover {
	box-sizing: border-box; opacity: 0; display: block; position: absolute; inset: 0; z-index: 10;
	border-radius: 5px; background: rgba(0, 0, 0, .6); transition: opacity .6s ease-in-out;
}
#sb-reviews-container-ncllc .sb-thumbnail-hover:hover { opacity: 1; transition: opacity .2s ease-in-out; }
#sb-reviews-container-ncllc .sbr-screenreader {
	position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
	overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important;
}

/* Narrow screens: the header's two parts stack, the button keeps its size (Smash Balloon's 480px rule). */
@media all and (max-width: 480px) {
	#sb-reviews-container-ncllc .sb-feed-header-average,
	#sb-reviews-container-ncllc .sb-feed-header-btn-ctn { float: left; width: 100%; margin-bottom: 10px; }
}