/* DW Google Reviews — familiar review-widget layout (rating panel left, soft grey cards, round side arrows) drawn in
   the Dream E-Waste theme: Kadence palette colours (Customizer → Colors), inherited Fira Sans, brand green accents.
   Every rule is scoped under .dwgr — the theme's p/ul margins otherwise beat single-class rules. */
.dwgr {
	--dwgr-gap: 24px;
	--dwgr-star: #f4b400;
	--dwgr-star-off: #dcdcdc;
	--dwgr-green: var(--global-palette1, #06752e);
	--dwgr-ink: var(--global-palette3, #2a2a2a);
	--dwgr-text: var(--global-palette4, #484848);
	--dwgr-muted: var(--global-palette5, #6b6b6b);
	--dwgr-line: var(--global-palette6, #e7e7e7);
	--dwgr-soft: var(--global-palette7, #f2f2f2);
	--dwgr-card: var(--global-palette9, #fff);
	--dwgr-tile: var(--global-palette8, #f4f4f4);
	margin: 0 auto;
	max-width: 1200px;
	text-align: left;
}
.dwgr [hidden] { display: none !important; }
.dwgr .dwgr-summary p, .dwgr .dwgr-text p { margin: 0; } /* (0,2,1): beats the theme's 32px paragraph margin */
.dwgr .dwgr-title { text-align: center; margin: 0 0 24px; }
.dwgr-empty { padding: 12px 16px; border: 1px dashed var(--global-palette6, #ccc); font-size: 14px; }

/* ---------- location filter: quiet text tabs on a hairline ---------- */
.dwgr .dwgr-tabs {
	display: flex; justify-content: center; gap: 4px 28px; flex-wrap: wrap;
	margin: 0 0 40px; border-bottom: 1px solid var(--dwgr-line);
}
.dwgr .dwgr-tab {
	appearance: none; cursor: pointer; margin: 0 0 -1px; padding: 10px 0 12px; min-height: 44px;
	border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; box-shadow: none;
	color: var(--dwgr-muted); font: inherit; font-size: 15px; line-height: 20px; font-weight: 500;
	text-transform: none; letter-spacing: 0; transition: color .15s, border-color .15s;
}
.dwgr .dwgr-tab:hover { color: var(--dwgr-ink); background: none; }
.dwgr .dwgr-tab[aria-pressed="true"] { color: var(--dwgr-ink); border-bottom-color: var(--dwgr-green); }
.dwgr .dwgr-tab:focus-visible, .dwgr .dwgr-arrow:focus-visible, .dwgr .dwgr-toggle:focus-visible, .dwgr .dwgr-more:focus-visible,
.dwgr .dwgr-viewport:focus-visible, .dwgr .dwgr-cta:focus-visible { outline: 2px solid var(--dwgr-green); outline-offset: 2px; }

/* ---------- layout ---------- */
.dwgr-body { display: grid; gap: 40px; align-items: center; }
.dwgr--with-summary .dwgr-body { grid-template-columns: 230px minmax(0, 1fr); }
.dwgr-main { min-width: 0; position: relative; }

/* ---------- rating panel: EXCELLENT / stars / Based on N reviews / Google ---------- */
.dwgr-summary { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.dwgr .dwgr-where { color: var(--dwgr-green); font-size: 13px; line-height: 18px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
.dwgr .dwgr-verdict { color: var(--dwgr-ink); font-size: 24px; line-height: 30px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.dwgr .dwgr-stars--lg { --dwgr-size: 30px; margin: 2px 0; }
.dwgr .dwgr-count { color: var(--dwgr-ink); font-size: 15px; line-height: 22px; }
.dwgr .dwgr-count strong { font-weight: 700; }
.dwgr .dwgr-google { font-family: Arial, Helvetica, sans-serif; font-size: 30px; line-height: 34px; font-weight: 500; letter-spacing: -.5px; }
.dwgr-google span:nth-child(1), .dwgr-google span:nth-child(4) { color: #4285f4; }
.dwgr-google span:nth-child(2), .dwgr-google span:nth-child(6) { color: #ea4335; }
.dwgr-google span:nth-child(3) { color: #fbbc05; }
.dwgr-google span:nth-child(5) { color: #34a853; }
.dwgr .dwgr-cta {
	margin-top: 8px; padding-bottom: 2px; color: var(--dwgr-green); font-size: 15px; line-height: 22px; font-weight: 500;
	text-decoration: none; border-bottom: 1px solid currentColor;
}
.dwgr .dwgr-cta::after { content: " \2192"; }
.dwgr .dwgr-cta:hover { color: var(--dwgr-ink); }

/* ---------- stars: one gradient masked by a star shape → any fraction, no images ---------- */
.dwgr-stars {
	--dwgr-size: 15px;
	display: block; flex: none; width: calc(var(--dwgr-size) * 5); height: var(--dwgr-size);
	background: linear-gradient(90deg, var(--dwgr-star) calc(var(--dwgr-r, 5) / 5 * 100%), var(--dwgr-star-off) 0);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.4l-6.1 3.4 1.4-6.8-5.1-4.7 6.9-.8z'/%3E%3C/svg%3E") 0 0 / var(--dwgr-size) var(--dwgr-size) repeat-x;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.4l-6.1 3.4 1.4-6.8-5.1-4.7 6.9-.8z'/%3E%3C/svg%3E") 0 0 / var(--dwgr-size) var(--dwgr-size) repeat-x;
}
.dwgr-g {
	display: inline-block; flex: none; width: 16px; height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.6 20.1H42V20H24v8h11.3C33.7 32.7 29.2 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 13 4 4 13 4 24s9 20 20 20 20-9 20-20c0-1.3-.1-2.6-.4-3.9z'/%3E%3Cpath fill='%23FF3D00' d='M6.3 14.7l6.6 4.8C14.7 15.1 19 12 24 12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2c-2 1.5-4.5 2.4-7.2 2.4-5.2 0-9.6-3.3-11.3-7.9l-6.5 5C9.5 39.6 16.2 44 24 44z'/%3E%3Cpath fill='%231976D2' d='M43.6 20.1H42V20H24v8h11.3c-.8 2.2-2.2 4.2-4.1 5.6l6.2 5.2C37 39.2 44 34 44 24c0-1.3-.1-2.6-.4-3.9z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- cards: laid out like a review on Google Maps ---------- */
.dwgr .dwgr-track { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--dwgr-gap); align-items: stretch; }
.dwgr .dwgr-card { margin: 0; padding: 0; display: flex; min-width: 0; }
.dwgr-card > article, .dwgr-dialog article {
	flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0;
	padding: 20px; background: var(--dwgr-tile); border: 0; border-radius: 10px;
}
.dwgr-dialog article { background: var(--dwgr-card); }
.dwgr-head { display: flex; align-items: center; gap: 12px; }
.dwgr-avatar {
	position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
	display: grid; place-items: center; background: var(--dwgr-green); color: #fff;
	font-size: 16px; font-weight: 500; line-height: 1;
}
.dwgr-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; }
.dwgr-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dwgr-sub { color: var(--dwgr-muted); font-size: 13px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dwgr-sub time + .dwgr-loc::before { content: " · "; }
.dwgr .dwgr-name { color: var(--dwgr-ink); font-size: 15px; line-height: 20px; font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dwgr a.dwgr-name:hover { text-decoration: underline; text-underline-offset: 2px; }
.dwgr-loc { color: var(--dwgr-muted); }
.dwgr-head .dwgr-g { align-self: flex-start; width: 24px; height: 24px; background-size: 18px; }
.dwgr .dwgr-text { color: var(--dwgr-text); font-size: 15px; line-height: 24px; overflow-wrap: anywhere; }
.dwgr .dwgr-text p { margin: 0 0 8px; }
.dwgr .dwgr-text p:last-child { margin-bottom: 0; }
.dwgr .is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; cursor: pointer; }
.dwgr .is-clamped p { display: inline; }
.dwgr .is-clamped p + p::before { content: " "; }

/* review photos: small square thumbnails; click → dialog */
.dwgr-photos { display: flex; gap: 6px; }
.dwgr .dwgr-photo {
	position: relative; appearance: none; margin: 0; padding: 0; border: 0; border-radius: 6px; overflow: hidden; cursor: zoom-in;
	width: 52px; height: 52px; background: var(--dwgr-soft); box-shadow: none; flex: none;
}
.dwgr-photo img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; transition: opacity .15s; }
.dwgr-photo:hover img { opacity: .85; }
.dwgr-photo-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.5); color: #fff; font-size: 15px; font-weight: 600; }

/* owner's reply, as Google shows it — in the dialog; the card only says "Owner replied" */
.dwgr-card .dwgr-reply, .dwgr-dialog .dwgr-replied { display: none; }
.dwgr .dwgr-replied { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--dwgr-muted); font-size: 13px; line-height: 18px; }
.dwgr .dwgr-replied::before {
	content: ""; width: 14px; height: 14px; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.dwgr-reply { padding: 8px 0 0 12px; border-left: 2px solid var(--dwgr-line); }
.dwgr .dwgr-reply-by { margin: 0 0 2px; color: var(--dwgr-ink); font-size: 13px; line-height: 18px; font-weight: 600; }
.dwgr-reply-by span { color: var(--dwgr-muted); font-weight: 400; }
.dwgr-reply-text { color: var(--dwgr-text); font-size: 14px; line-height: 21px; }

.dwgr-foot { display: flex; align-items: center; gap: 14px; margin-top: -2px; }
.dwgr-dialog .dwgr-foot { display: none; }
.dwgr .dwgr-toggle {
	appearance: none; align-self: flex-start; margin: 0; padding: 0; min-height: 24px; border: 0; border-radius: 0;
	background: none; box-shadow: none; cursor: pointer;
	color: var(--dwgr-muted); font: inherit; font-size: 14px; line-height: 20px; font-weight: 500;
	text-transform: none; letter-spacing: 0; text-decoration: none;
}
.dwgr .dwgr-toggle:hover { background: none; color: var(--dwgr-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- full review dialog ---------- */
.dwgr-dialog {
	width: min(560px, calc(100vw - 32px)); max-height: min(86vh, 900px); padding: 0; border: 0; border-radius: 10px;
	background: var(--dwgr-card); box-shadow: 0 24px 60px rgba(0,0,0,.25); overflow: hidden;
}
.dwgr-dialog::backdrop { background: rgba(18, 24, 20, .55); }
.dwgr-dialog-body { max-height: min(86vh, 900px); overflow-y: auto; overscroll-behavior: contain; }
.dwgr-dialog article { border: 0; border-radius: 0; padding: 26px 26px 28px; gap: 12px; }
.dwgr-dialog .dwgr-head { padding-right: 40px; }
.dwgr-dialog .dwgr-head .dwgr-g { display: none; }
.dwgr .dwgr-close {
	position: absolute; top: 14px; right: 14px; z-index: 1; width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 50%;
	background: var(--dwgr-soft); box-shadow: none; cursor: pointer; color: var(--dwgr-ink);
}
.dwgr .dwgr-close::before, .dwgr .dwgr-close::after { content: ""; position: absolute; left: 11px; top: 17px; width: 14px; height: 1.5px; background: currentColor; transform: rotate(45deg); }
.dwgr .dwgr-close::after { transform: rotate(-45deg); }
.dwgr .dwgr-close:hover { background: var(--dwgr-line); }
.dwgr-gallery { display: grid; gap: 8px; }
.dwgr .dwgr-view { align-self: flex-start; margin-top: 6px; color: var(--dwgr-green); font-size: 14px; font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; }
.dwgr .dwgr-view::after { content: " \2197"; }
.dwgr .dwgr-view:hover { color: var(--dwgr-ink); }
.dwgr-gallery img { width: 100%; height: auto; border-radius: 6px; margin: 0; background: var(--dwgr-soft); }

/* ---------- carousel: native scroll-snap (swipe works without script) ---------- */
.dwgr--carousel .dwgr-viewport { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.dwgr--carousel .dwgr-viewport::-webkit-scrollbar { display: none; }
.dwgr--carousel .dwgr-track { grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--dwgr-gap)) / 3); }
.dwgr--carousel .dwgr-card { scroll-snap-align: start; }
@media (hover: hover) and (pointer: fine) { .dwgr--carousel .dwgr-viewport { cursor: grab; } }
.dwgr--carousel .dwgr-viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.dwgr--carousel .dwgr-viewport.is-dragging * { pointer-events: none; }
.dwgr-nav { display: flex; justify-content: flex-start; margin-top: 14px; min-height: 32px; }
/* round white arrows on the card edges, vertically centred on the cards (nav row = 46px below them) */
.dwgr--carousel .dwgr-prev, .dwgr--carousel .dwgr-next { position: absolute; top: calc(50% - 23px); transform: translateY(-50%); z-index: 2; }
.dwgr--carousel .dwgr-prev { left: -20px; }
.dwgr--carousel .dwgr-next { right: -20px; }
.dwgr .dwgr-arrow {
	appearance: none; cursor: pointer; margin: 0; padding: 0; width: 40px; height: 40px; border-radius: 50%;
	border: 0; background: var(--dwgr-card); color: var(--dwgr-ink); box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
	display: grid; place-items: center; transition: border-color .15s, color .15s;
}
.dwgr .dwgr-arrow::before {
	content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(135deg); margin-left: 3px;
}
.dwgr .dwgr-next::before { transform: rotate(-45deg); margin: 0 3px 0 0; }
/* pause / play: two bars ↔ triangle */
.dwgr .dwgr-pause::before { width: 7px; height: 9px; margin: 0; transform: none; border: solid currentColor; border-width: 0 2.5px; }
.dwgr .dwgr-pause[aria-pressed="true"]::before { width: 0; height: 0; margin-left: 3px; border-style: solid; border-color: transparent transparent transparent currentColor; border-width: 6px 0 6px 10px; }
.dwgr .dwgr-arrow:hover:not(:disabled) { background: var(--dwgr-card); color: var(--dwgr-green); box-shadow: 0 3px 14px rgba(0, 0, 0, .22); }
.dwgr .dwgr-arrow:disabled { opacity: 0; pointer-events: none; }
/* pause/play: small and quiet under the cards */
.dwgr .dwgr-pause { width: 32px; height: 32px; box-shadow: none; background: var(--dwgr-tile); }
.dwgr .dwgr-pause:hover { box-shadow: none; background: var(--dwgr-line); }

/* ---------- grid ---------- */
.dwgr--grid .dwgr-track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dwgr--grid.dwgr--with-summary .dwgr-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dwgr--grid.dwgr--with-summary .dwgr-summary { position: sticky; top: 120px; }
.dwgr-more-wrap { text-align: center; }
.dwgr .dwgr-more { margin-top: 32px; }

/* ---------- tablet: rating panel becomes a centred header above the cards ---------- */
@media (max-width: 1024px) {
	.dwgr--with-summary .dwgr-body { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.dwgr--grid.dwgr--with-summary .dwgr-summary { position: static; }
	.dwgr .dwgr-stars--lg { --dwgr-size: 26px; }
	.dwgr--carousel .dwgr-track { grid-auto-columns: calc((100% - var(--dwgr-gap)) / 2); }
	.dwgr--grid .dwgr-track, .dwgr--grid.dwgr--with-summary .dwgr-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dwgr--carousel .dwgr-prev { left: -12px; }
	.dwgr--carousel .dwgr-next { right: -12px; }
}
/* ---------- phone: one card plus a peek of the next, so it reads as swipeable ---------- */
@media (max-width: 767px) {
	.dwgr { --dwgr-gap: 14px; }
	.dwgr .dwgr-tabs { flex-wrap: nowrap; justify-content: flex-start; gap: 22px; overflow-x: auto; scrollbar-width: none; margin: 0 -15px 28px; padding: 0 15px; }
	.dwgr .dwgr-tabs::-webkit-scrollbar { display: none; }
	.dwgr .dwgr-tab { flex: none; }
	.dwgr--carousel .dwgr-track { grid-auto-columns: 86%; }
	.dwgr--grid .dwgr-track, .dwgr--grid.dwgr--with-summary .dwgr-track { grid-template-columns: minmax(0, 1fr); }
	.dwgr-card > article { padding: 18px; }
	.dwgr-nav { justify-content: center; gap: 8px; }
	.dwgr--carousel .dwgr-prev, .dwgr--carousel .dwgr-next { position: static; transform: none; }
	.dwgr .dwgr-arrow:disabled { opacity: .35; }
	.dwgr .dwgr-verdict { font-size: 22px; }
	.dwgr .dwgr-google { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
	.dwgr-card > article, .dwgr .dwgr-tab, .dwgr .dwgr-arrow { transition: none; }
}