.dsqg-gallery {
	/* Easy to retheme per site: override these in the widget's Advanced >
	   Custom CSS, e.g.  selector { --dsqg-accent: #8e5bd6; } */
	--dsqg-accent: #D9A664;
	--dsqg-ink: #2b2430;
	--dsqg-radius: 14px;
	--dsqg-shadow: 0 1px 2px rgba(20,16,30,.08), 0 8px 24px rgba(20,16,30,.14);
	--dsqg-shadow-hover: 0 2px 4px rgba(20,16,30,.10), 0 18px 40px rgba(20,16,30,.26);
}

.dsqg-gallery-controls {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-bottom: 26px;
}
.dsqg-search-input,
.dsqg-category-filter {
	min-width: 210px;
	padding: 11px 20px;
	border: 1px solid rgba(20,16,30,.14);
	border-radius: 999px;
	font-size: 15px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(20,16,30,.05);
	transition: border-color .2s ease, box-shadow .2s ease;
}
.dsqg-search-input:focus,
.dsqg-category-filter:focus {
	outline: none;
	border-color: var(--dsqg-accent);
	box-shadow: 0 0 0 3px rgba(217,166,100,.28);
}

/* --- Layouts --- */
.dsqg-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(var(--dsqg-cols, 3), 1fr);
	/* Don't stretch every tile to the tallest in its row — a shorter image
	   would otherwise sit on a dark band filling the leftover height. */
	align-items: start;
}
.dsqg-grid.dsqg-layout-list {
	grid-template-columns: 1fr;
}
/* Column count is meant to drop on phones/tablets, but that depends on
   the person having set a separate value in Elementor's responsive tabs
   for the Columns control — easy to miss. This is a safety net so it
   still happens automatically even if that was never configured.
   !important is needed to reliably beat Elementor's own per-element
   generated rule, which is otherwise more specific than this one. */
@media (max-width: 480px) {
	.dsqg-grid.dsqg-layout-grid { grid-template-columns: 1fr !important; }
}
@media (min-width: 481px) and (max-width: 767px) {
	.dsqg-grid.dsqg-layout-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
/* CSS multi-column layout (columns/column-gap) turned out not to reliably
   produce a horizontal gap in practice, even overridden with margin.
   Masonry is rebuilt in JS instead (see initMasonry in frontend.js): each
   tile gets sorted into one of several column <div>s, each a simple flex
   column with its own gap — a property that isn't dependent on the
   multi-column algorithm and has been reliable everywhere it's used
   elsewhere in this stylesheet. */
.dsqg-grid.dsqg-layout-masonry {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}
.dsqg-masonry-column {
	display: flex;
	flex-direction: column;
	gap: 20px;
	flex: 1 1 0;
	min-width: 0;
}
.dsqg-grid.dsqg-layout-masonry .dsqg-tile {
	margin: 0;
}
/* Until the script has dealt the tiles into columns (first paint, or the
   Elementor editor preview) show an ordinary grid instead of one squashed
   row of tiles. */
.dsqg-grid.dsqg-layout-masonry:not(.dsqg-masonry-ready) {
	display: grid;
	grid-template-columns: repeat(var(--dsqg-cols, 3), 1fr);
	gap: 20px;
	align-items: start;
}
@media (max-width: 480px) {
	.dsqg-grid.dsqg-layout-masonry:not(.dsqg-masonry-ready) { grid-template-columns: 1fr; }
}
@media (min-width: 481px) and (max-width: 767px) {
	.dsqg-grid.dsqg-layout-masonry:not(.dsqg-masonry-ready) { grid-template-columns: repeat(2, 1fr); }
}
.dsqg-grid.dsqg-layout-carousel {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	gap: 16px;
	/* Room around the slides so their shadows and the hover lift aren't
	   clipped by the scroll container, and the first/last slide sit a
	   little in from the edge. */
	padding: 14px 20px 30px;
	scroll-padding: 0 20px;
	box-sizing: border-box;
	scrollbar-width: none;
	align-items: center; /* mixed-height slides centre instead of stretching */
}
.dsqg-grid.dsqg-layout-carousel::-webkit-scrollbar { display: none; }
/* Centres the row when there are too few slides to fill the width. Auto
   margins (not justify-content:center) so that when the slides DO overflow,
   the first one stays reachable instead of being clipped off the left. */
.dsqg-grid.dsqg-layout-carousel .dsqg-tile:first-child { margin-left: auto; }
.dsqg-grid.dsqg-layout-carousel .dsqg-tile:last-child { margin-right: auto; }
.dsqg-grid.dsqg-layout-carousel .dsqg-tile {
	/* flex-basis + max-width together were inconsistently honoured across
	   browsers (Samsung Internet / in-app WebViews rendered the tile at
	   nearly full width, ignoring the 260px cap entirely). Setting an
	   explicit width, with flex sizing turned off, is far more reliably
	   supported everywhere. */
	flex: 0 0 auto;
	/* Slide width follows the Columns setting: row width minus the 16px
	   gaps, divided by the column count. (It used to be a fixed 260px,
	   which is why Columns was ignored on desktop.) */
	width: calc( ( 100% - ( var(--dsqg-cols, 3) - 1 ) * 16px ) / var(--dsqg-cols, 3) );
	scroll-snap-align: start;
}
/* Phones and small tablets always get larger slides, whatever Columns says */
@media (max-width: 767px) {
	.dsqg-grid.dsqg-layout-carousel .dsqg-tile {
		width: calc( ( 100% - 16px ) / 2 );
		scroll-snap-align: center;
	}
}
@media (max-width: 480px) {
	.dsqg-grid.dsqg-layout-carousel .dsqg-tile {
		width: 88%;
	}
}
/* A small, deliberate peek of the next image (rather than nearly half of
   it getting abruptly cropped by the container edge) fades out instead
   of hard-cutting, so it reads as a design choice, not a rendering bug. */
.dsqg-grid.dsqg-layout-carousel {
	-webkit-mask-image: linear-gradient( to right, transparent, black 20px, black calc(100% - 20px), transparent );
	mask-image: linear-gradient( to right, transparent, black 20px, black calc(100% - 20px), transparent );
}

.dsqg-tile {
	margin: 0;
	cursor: pointer;
	overflow: hidden;
	position: relative;
	isolation: isolate; /* keeps rounded corners clean while the image zooms (Safari) */
	border-radius: var(--dsqg-radius);
	background: #241f2a; /* shows while a lazy-loaded image is still arriving, instead of a white flash */
	box-shadow: var(--dsqg-shadow, 0 1px 2px rgba(20,16,30,.08), 0 8px 24px rgba(20,16,30,.14));
	transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
/* Soft darkening at the foot of the card on hover, so the like button always reads. */
.dsqg-tile::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 34%;
	background: linear-gradient( to top, rgba(10,8,14,.45), transparent );
	opacity: 0;
	transition: opacity .35s ease;
	pointer-events: none;
	z-index: 1;
}
@media (hover: hover) {
	.dsqg-tile:hover {
		transform: translateY(-5px);
		box-shadow: var(--dsqg-shadow-hover, 0 2px 4px rgba(20,16,30,.10), 0 18px 40px rgba(20,16,30,.26));
	}
	.dsqg-tile:hover::after { opacity: 1; }
}
/* Gentle entrance. 'backwards' (not 'both') on purpose: a forwards-filled
   transform would stay applied afterwards and override the hover lift. */
@media (prefers-reduced-motion: no-preference) {
	.dsqg-layout-grid .dsqg-tile,
	.dsqg-layout-carousel .dsqg-tile {
		animation: dsqg-rise .6s cubic-bezier(.2,.7,.2,1) backwards;
	}
	.dsqg-tile:nth-child(2) { animation-delay: .06s; }
	.dsqg-tile:nth-child(3) { animation-delay: .12s; }
	.dsqg-tile:nth-child(4) { animation-delay: .18s; }
	.dsqg-tile:nth-child(5) { animation-delay: .24s; }
	.dsqg-tile:nth-child(6) { animation-delay: .30s; }
	.dsqg-tile:nth-child(n+7) { animation-delay: .36s; }
}
@keyframes dsqg-rise {
	from { opacity: 0; transform: translateY(18px) scale(.985); }
	to   { opacity: 1; transform: none; }
}
.dsqg-tile img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: inherit;
	transition: transform .6s cubic-bezier(.2,.7,.2,1);
	/* Without its own isolated compositing layer, animating one image's
	   transform on hover can force the browser to repaint the whole grid
	   at once — which is what showed up as neighbouring images going
	   blank and flickering. Promoting each image to its own layer keeps
	   the hover effect contained to just that one tile. */
	will-change: transform;
	backface-visibility: hidden;
	transform: translateZ(0);
}
.dsqg-tile:hover img {
	transform: scale(1.025) translateZ(0);
}

/* --- Skins --- */
.dsqg-skin-minimal .dsqg-tile {
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(20,16,30,.12);
}
.dsqg-skin-framed .dsqg-tile {
	/* Like a mounted print: a white mat, a fine inner edge, a soft shadow. */
	border: 10px solid #fff;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(20,16,30,.08), var(--dsqg-shadow, 0 1px 2px rgba(20,16,30,.08), 0 8px 24px rgba(20,16,30,.14));
}
.dsqg-skin-framed .dsqg-tile img { border-radius: 2px; }
.dsqg-skin-card .dsqg-tile { border-radius: 18px; }
.dsqg-skin-overlay .dsqg-tile figcaption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	z-index: 2;
	padding: 36px 16px 14px;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	background: linear-gradient( to top, rgba(10,8,14,.85), transparent );
	transform: translateY(8px);
	opacity: 0;
	transition: opacity .35s ease, transform .35s ease;
}
.dsqg-skin-overlay .dsqg-tile:hover figcaption { opacity: 1; transform: none; }
@media (hover: none) {
	.dsqg-skin-overlay .dsqg-tile figcaption { opacity: 1; transform: none; }
}

.dsqg-no-results {
	text-align: center;
	padding: 40px 0;
	color: #777;
	grid-column: 1 / -1;
	flex: 1 1 100%;
}
.dsqg-grid.is-loading {
	opacity: .5;
	pointer-events: none;
	transition: opacity .2s ease;
}

/* --- Category pills --- */
.dsqg-category-pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}
.dsqg-category-pills .dsqg-pill {
	padding: 8px 18px !important;
	border: 1px solid rgba(20,16,30,.16) !important;
	border-radius: 999px !important;
	background: #fff !important;
	color: var(--dsqg-ink) !important;
	box-shadow: none !important;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.dsqg-category-pills .dsqg-pill:hover {
	border-color: var(--dsqg-accent) !important;
	transform: translateY(-1px);
}
.dsqg-category-pills .dsqg-pill.is-active {
	background: var(--dsqg-accent) !important;
	border-color: var(--dsqg-accent) !important;
}

/* --- Load more --- */
.dsqg-load-more-wrap {
	text-align: center;
	margin: 34px 0 6px;
}
.dsqg-load-more-wrap[hidden] { display: none; }
.dsqg-load-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 190px;
	min-height: 44px;
	padding: .62em 1.8em !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--dsqg-btn-bg) !important;
	color: var(--dsqg-btn-ink) !important;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .02em;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(66, 50, 68, .12) !important;
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, opacity .2s ease;
}
.dsqg-load-more:hover {
	transform: translateY(-2px);
	background: var(--dsqg-btn-bg-hover) !important;
	box-shadow: 0 6px 16px rgba(66, 50, 68, .2) !important;
}
.dsqg-load-more:disabled {
	opacity: .65;
	cursor: default;
	transform: none;
}

/* --- Set badge on grid tiles --- */
/* Top-LEFT: many of the quote images carry their own "PART 1 OF 3" tag in
   the top-right, and the badge was sitting on top of it. */
.dsqg-set-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;
	background: rgba(24,18,30,.7); /* no backdrop-filter: it was a graphics layer per tile and a Safari clipping risk */
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	padding: 5px 10px;
	border-radius: 999px;
	line-height: 1;
}

/* --- Filmstrip (lightbox set view) --- */
.dsqg-lb-filmstrip {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	max-width: 92vw;
	padding: 4px;
}
.dsqg-lb-set-item {
	position: relative;
	flex: 0 0 auto;
}
.dsqg-lb-set-item img {
	/* Fixed height, auto width — source images don't need to match
	   dimensions exactly; the browser scales each to a common height
	   so the set reads as one continuous piece regardless of source size. */
	height: 70vh;
	width: auto;
	max-width: 80vw;
	display: block;
	border-radius: 4px;
}
.dsqg-lb-set-number {
	position: absolute;
	top: 8px;
	left: 8px;
	background: rgba(0,0,0,.65);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 12px;
}

/* --- Lightbox --- */
.dsqg-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(12,9,16,.9);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
}
.dsqg-lightbox-inner {
	position: relative;
	max-width: 90vw;
	max-height: 90vh;
	text-align: center;
}
.dsqg-lb-image {
	max-width: 90vw;
	max-height: 80vh;
	border-radius: 10px;
	box-shadow: 0 20px 60px rgba(0,0,0,.55);
}
.dsqg-lb-caption {
	color: #fff;
	margin-top: 10px;
}
.dsqg-lb-close,
.dsqg-lb-prev,
.dsqg-lb-next {
	position: absolute;
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 0 3px !important;
	background: rgba(255,255,255,.14) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	cursor: pointer;
	font-size: 28px;
	line-height: 1;
	transition: background .2s ease;
}
.dsqg-lb-close:hover,
.dsqg-lb-prev:hover,
.dsqg-lb-next:hover { background: rgba(255,255,255,.3) !important; }
.dsqg-lb-close { top: -50px; right: 0; }
.dsqg-lb-prev { left: -60px; top: 50%; transform: translateY(-50%); }
.dsqg-lb-next { right: -60px; top: 50%; transform: translateY(-50%); }

.dsqg-carousel-wrap.is-carousel { position: relative; }
.dsqg-carousel-wrap.is-carousel .dsqg-grid { width: 100%; }
/* Arrows float over the edges of the carousel as round buttons, rather than
   sitting in their own boxes either side. !important for the same reason as
   the like button — theme button styles. */
.dsqg-carousel-arrow {
	position: absolute;
	top: calc(50% - 8px);
	transform: translateY(-50%);
	z-index: 4;
	width: 46px;
	height: 46px;
	padding: 0 0 3px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0 !important;
	border-radius: 50% !important;
	background: #fff !important;
	color: var(--dsqg-ink) !important;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(20,16,30,.3) !important;
	transition: transform .2s ease, background .2s ease, color .2s ease;
}
.dsqg-carousel-prev { left: 6px; }
.dsqg-carousel-next { right: 6px; }
.dsqg-carousel-arrow:hover {
	transform: translateY(-50%) scale(1.09);
	background: var(--dsqg-accent) !important;
	color: #fff !important;
}
@media (max-width: 767px) {
	.dsqg-carousel-arrow { width: 38px; height: 38px; font-size: 24px; }
	.dsqg-carousel-prev { left: 2px; }
	.dsqg-carousel-next { right: 2px; }
}

/* Slim progress bar under the carousel — shows how far along you are. */
.dsqg-carousel-progress {
	position: relative;
	width: 140px;
	height: 4px;
	margin: 0 auto 18px;
	border-radius: 999px;
	background: rgba(20,16,30,.12);
	overflow: hidden;
}
.dsqg-carousel-progress-thumb {
	position: absolute;
	top: 0; bottom: 0; left: 0;
	width: 30%;
	border-radius: 999px;
	background: var(--dsqg-accent);
	transition: left .12s linear, width .2s ease;
}
/* Everything already fits — nothing to scroll, so no arrows or progress bar. */
.dsqg-static .dsqg-carousel-arrow,
.dsqg-static .dsqg-carousel-progress { display: none !important; }

.dsqg-full-gallery-link {
	text-align: center;
	margin-top: 6px;
}
/* Grid / masonry / list have no progress bar above the link, so give it room. */
.dsqg-carousel-wrap:not(.is-carousel) ~ .dsqg-full-gallery-link { margin-top: 30px; }
.dsqg-load-more-wrap:not([hidden]) ~ .dsqg-full-gallery-link { margin-top: 20px; }
/* The site's button: a filled gold pill with cream text, as on the podcast banner's "Listen Now".
   (This used to be an outlined pill in the theme's link colour, which matched nothing else.)
   Colours are variables so Elementor's controls, or another site's palette, can change them, and
   the selectors are specific enough that a theme's link colours and hover styles can't override them. */
.dsqg-gallery {
	--dsqg-btn-bg: #DDA34E;
	--dsqg-btn-bg-hover: #D49A40;
	--dsqg-btn-ink: #FFFDF9;
}
.dsqg-gallery .dsqg-full-gallery-link a,
.dsqg-gallery .dsqg-full-gallery-link a:hover,
.dsqg-gallery .dsqg-full-gallery-link a:focus {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	gap: 8px;
	min-height: 44px;
	padding: .62em 1.8em;
	border: 0;
	border-radius: 999px;
	background-color: var(--dsqg-btn-bg);
	color: var(--dsqg-btn-ink);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .02em;
	line-height: 1.3;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(66, 50, 68, .12);
	transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.dsqg-gallery .dsqg-full-gallery-link a:hover {
	background-color: var(--dsqg-btn-bg-hover);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(66, 50, 68, .2);
}
.dsqg-gallery .dsqg-full-gallery-link a:focus-visible { outline: 2px solid var(--dsqg-ink); outline-offset: 3px; }

.dsqg-lb-image,
.dsqg-lb-set-item img {
	cursor: pointer;
}

/* --- Like button --- */
/* !important on the colour/border/shape properties: themes (and Elementor
   kits) style every <button>, which turned this into a pink box. */
.dsqg-tile .dsqg-like-btn {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 3;
	width: 38px;
	height: 38px;
	padding: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(24,18,30,.62) !important; /* no backdrop-filter, see the set badge above */
	color: #fff !important;
	box-shadow: 0 2px 10px rgba(0,0,0,.3) !important;
	cursor: pointer;
	line-height: 1;
	transition: transform .2s ease, background .2s ease;
}
.dsqg-tile .dsqg-like-btn:hover {
	transform: scale(1.12);
	background: rgba(24,18,30,.82) !important;
}
.dsqg-like-btn:disabled { opacity: .7; cursor: default; }
.dsqg-like-icon {
	width: 19px;
	height: 19px;
	fill: none;
	stroke: #fff;
	stroke-width: 2;
	stroke-linejoin: round;
}
.dsqg-tile .dsqg-like-btn.is-liked { background: rgba(255,255,255,.94) !important; }
.dsqg-like-btn.is-liked .dsqg-like-icon {
	fill: #e0446b;
	stroke: #e0446b;
	animation: dsqg-pop .35s cubic-bezier(.2,.9,.3,1.6);
}
@keyframes dsqg-pop {
	0%   { transform: scale(.6); }
	100% { transform: scale(1); }
}

/* view count has no public UI — dashboard/stats-image only */

/* Narrow screens: the lightbox arrows sit over the image edges instead of
   outside it, where they'd be off-screen. */
@media (max-width: 760px) {
	.dsqg-lb-prev { left: 8px; }
	.dsqg-lb-next { right: 8px; }
	.dsqg-lb-close { top: -54px; right: 0; }
}

/* --- Equal-size tiles ("Picture shape") ---
   Every tile gets the same shape so rows line up. The picture is shown WHOLE
   (object-fit: contain, never cropped: the quote is baked into the image), and
   if its own shape differs a little, a soft blur of the same picture fills the
   spare space instead of a flat bar. */
.dsqg-grid.dsqg-shape-fixed .dsqg-tile {
	aspect-ratio: var(--dsqg-ratio, 0.5625);
}
.dsqg-grid.dsqg-shape-fixed .dsqg-tile img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.dsqg-grid.dsqg-shape-fixed .dsqg-tile::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	border-radius: inherit; /* rounds itself, so it can't poke out of the corners even if a browser skips the parent's clip */
	/* No CSS filter here on purpose (see DS_Quote_Gallery_CPT::backdrop_uri): the backdrop is a tiny
	   pre-made copy of the picture, stretched, which is already soft. A light darkening layer sits on it. */
	background: linear-gradient(rgba(12, 9, 16, .22), rgba(12, 9, 16, .22)), var(--dsqg-bg, none) center / cover no-repeat;
}

/* ---------- Single quote image page (/quotes/its-name/) ---------- */
.dsqg-single { max-width: 560px; margin: 24px auto 32px; text-align: center; }
.dsqg-single-figure { margin: 0; }
.dsqg-single-frame {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	border-radius: 14px;
	line-height: 0;
	box-shadow: 0 8px 26px rgba(0, 0, 0, .16);
}
.dsqg-single-frame::before { content: ""; display: block; padding-top: var(--dsqg-ratio, 100%); }
.dsqg-single-frame > img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	object-fit: contain;
}
.dsqg-single-author { margin-top: 12px; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.dsqg-single-description { margin: 16px auto 0; max-width: 46ch; line-height: 1.6; }

/* --- Badges ("New", "Popular", "Latest"...) on promo-type buttons ---
   Same words and look as the SW Topic Finder's badges. Explicit colours so a theme's link styles
   (the badge sits inside a link) can't touch them. No filters or blurs. */
.dsqg-badge {
	display: inline-block;
	margin-left: 10px;
	padding: 2px 10px;
	border-radius: 999px;
	background: #423244;
	color: #fff;
	font-size: .68rem;
	font-style: normal;
	font-weight: 700;
	letter-spacing: .1em;
	line-height: 1.6;
	text-transform: uppercase;
	vertical-align: middle;
	white-space: nowrap;
	box-shadow: 0 2px 6px rgba(66, 50, 68, .25);
}
.dsqg-badge--gold { background: #D9A664; color: #423244; box-shadow: 0 0 0 1px rgba(66, 50, 68, .18); }
.dsqg-badge--rose { background: #F1D9CE; color: #423244; box-shadow: 0 0 0 1px rgba(66, 50, 68, .18); }
.dsqg-badge--sage { background: #C7CDB0; color: #423244; box-shadow: 0 0 0 1px rgba(66, 50, 68, .18); }
.dsqg-badge--sky  { background: #D7E6E6; color: #423244; box-shadow: 0 0 0 1px rgba(66, 50, 68, .18); }