/* SS Reviews — approved variants B (carousel) and C (strip), mockup 3-variants-v1.
   Palette lives on :root (not scoped to .ss-reviews) so the dialog and the
   ss_reviews_stats badge — both siblings of .ss-reviews in the DOM, not
   descendants — inherit it too. --ss-blue, --ss-star and --ss-ink-900 are
   admin-editable per client (Отзывы → Настройки витрины → Дизайн);
   SSREV_Shortcode::design_vars_css() prints a second :root block after this
   one that overrides those three when customised. --ss-card-bg has no
   default here at all — it's deliberately undefined unless the admin sets
   one, so var(--ss-card-bg, <per-layout fallback>) on each .ss-card rule
   below keeps today's per-layout background until someone opts in. */
:root { --ss-ink-900: #16181D; --ss-ink-800: #292828; --ss-ink-600: #3B3F48; --ss-ink-500: #5C6370; --ss-ink-400: #8F95A1; --ss-blue: #1771E6; --ss-blue-bg: #EBF4FF; --ss-yellow: #FFDD2D; --ss-bg: #F6F7F8; --ss-divider: #ECEDF1; --ss-star: #FFB800; }
/* Soft tint behind the avatar initial, derived from the accent colour so a
   custom --ss-blue doesn't leave a mismatched hardcoded blue-bg behind.
   Static --ss-blue-bg above is the fallback for browsers without color-mix(). */
@supports (color: color-mix(in srgb, red 10%, blue)) {
	:root { --ss-blue-bg: color-mix(in srgb, var(--ss-blue) 14%, white); }
}
.ss-reviews { color: var(--ss-ink-800) !important; }

/* No section background of its own in any layout: the band behind the cards
   is transparent, so whatever the page builder puts under it (Elementor
   section background, an image, the page's own colour) shows through.
   Opt back in per instance with bg="white|grey|blue" on the shortcode. */

/* The showcase takes exactly the width of whatever it is dropped into (an
   Elementor column, the theme's content area …) — no 100vw breakout and no
   max-width of its own: page layout belongs to the page builder, not here.
   Inner padding is opt-in per client (Отзывы → Настройки витрины → Дизайн),
   printed as --ss-wrap-pad-y / --ss-wrap-pad-x; unset = flush to the
   container on every breakpoint, spacing set around the widget instead. */
.ss-wrap { max-width: 100% !important; margin: 0 auto !important; padding: var(--ss-wrap-pad-y, 0px) var(--ss-wrap-pad-x, 0px) !important; box-sizing: border-box !important; }

/* bg="…" paints a section background from the shortcode itself, for pages
   where the block is not inside a container that already provides one. */
.ss-reviews.ss-bg-blue { background: var(--ss-blue-bg) !important; }
.ss-reviews.ss-bg-grey { background: var(--ss-bg) !important; }
.ss-reviews.ss-bg-white { background: #fff !important; }

.ss-head { display: flex !important; align-items: flex-end !important; justify-content: space-between !important; gap: 24px !important; flex-wrap: wrap !important; margin-bottom: 8px !important; }
.ss-heading { font-size: clamp(24px, 2.6vw, 34px) !important; line-height: 1.2 !important; letter-spacing: -0.01em !important; font-weight: 700 !important; color: var(--ss-ink-800) !important; margin: 0 0 8px !important; }
.ss-sub { color: var(--ss-ink-500) !important; font-size: 16px !important; line-height: 1.5 !important; margin: 0 !important; max-width: 60ch !important; }

.ss-controls { display: flex !important; gap: 10px !important; }
.ss-controls .ss-arrow:not(:last-child) { margin-right: 10px !important; }
.ss-arrow { width: 44px !important; height: 44px !important; border-radius: 10px !important; border: none !important; background: var(--ss-arrow-bg, #191919) !important; color: var(--ss-arrow-fg, #fff) !important; cursor: pointer !important; display: grid !important; place-items: center !important; padding: 0 !important; transition: box-shadow .2s cubic-bezier(.22,.61,.36,1), transform .2s cubic-bezier(.22,.61,.36,1) !important; }
.ss-arrow:hover, .ss-arrow:focus, .ss-arrow:active { background: var(--ss-arrow-bg, #191919) !important; color: var(--ss-arrow-fg, #fff) !important; }
.ss-arrow:hover { box-shadow: 0 6px 18px rgba(22,24,29,.10) !important; transform: translateY(-1px) !important; }
.ss-arrow:focus-visible, .ss-reviews a:focus-visible, .ss-reviews button:focus-visible { outline: 2px solid var(--ss-blue) !important; outline-offset: 2px !important; }
.ss-arrow svg { width: 18px !important; height: 18px !important; display: block !important; }

.ss-track { display: flex !important; gap: 24px !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; padding: 24px 4px 32px !important; cursor: grab !important; scrollbar-width: none !important; }
.ss-track::-webkit-scrollbar { display: none !important; }
.ss-track.ss-dragging { cursor: grabbing !important; scroll-snap-type: none !important; }
.ss-track > * { scroll-snap-align: start !important; flex-shrink: 0 !important; }
/* Used by both layout=grid's "show more" and tabs="yes" source filtering. */
.ss-card.ss-hidden { display: none !important; }

/* Stars: one element, the row is a repeated star mask filled with the star
   colour. Each star is 16px plus a 2px gap, so the width is n*18-2. */
.ss-stars { display: inline-block !important; vertical-align: middle !important; flex-shrink: 0 !important; height: 16px !important; width: 88px; color: var(--ss-star) !important; background-color: currentColor !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4l-5.8 3.1 1.1-6.5L2.6 9.4l6.5-.9L12 2.6z'/%3E%3C/svg%3E") 0 0 / 18px 16px repeat-x !important; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4l-5.8 3.1 1.1-6.5L2.6 9.4l6.5-.9L12 2.6z'/%3E%3C/svg%3E") 0 0 / 18px 16px repeat-x !important; }
.ss-stars.ss-r0 { display: none !important; }
.ss-stars.ss-r1 { width: 16px !important; }
.ss-stars.ss-r2 { width: 34px !important; }
.ss-stars.ss-r3 { width: 52px !important; }
.ss-stars.ss-r4 { width: 70px !important; }
.ss-stars.ss-r5 { width: 88px !important; }

.ss-text { color: var(--ss-ink-600) !important; font-size: 16px !important; line-height: 1.5 !important; margin: 0 !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
.ss-more { background: none !important; border: none !important; padding: 0 !important; margin: 8px 0 0 !important; align-self: flex-start !important; color: var(--ss-ink-800) !important; font-family: inherit !important; font-size: 15px !important; font-weight: 600 !important; text-transform: none !important; text-decoration: none !important; cursor: pointer !important; }
/* Override the theme's global button:hover/focus (yellow/uppercase) leaking onto our text buttons. */
.ss-more:hover, .ss-more:focus, .ss-more:active { background: none !important; box-shadow: none !important; color: var(--ss-ink-800) !important; text-transform: none !important; text-decoration: underline !important; }

.ss-avatar { width: 44px !important; height: 44px !important; border-radius: 50% !important; display: grid !important; place-items: center !important; font-weight: 700 !important; font-size: 17px !important; flex-shrink: 0 !important; overflow: hidden !important; }
img.ss-avatar, .ss-avatar img { object-fit: cover !important; display: block !important; }

.ss-photos { display: flex !important; gap: 8px !important; margin: 10px 0 0 !important; }
.ss-photo { width: 56px !important; height: 56px !important; padding: 0 !important; border: none !important; border-radius: 8px !important; overflow: hidden !important; flex-shrink: 0 !important; cursor: pointer !important; background: var(--ss-bg) !important; }
.ss-photo img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }

.ss-dialog-photos:not(:empty) { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-top: 14px !important; }
.ss-dialog-photo { width: 120px !important; height: 120px !important; padding: 0 !important; margin: 0 !important; border: none !important; border-radius: 10px !important; overflow: hidden !important; flex-shrink: 0 !important; cursor: zoom-in !important; background: var(--ss-bg, #F6F7F8) !important; box-shadow: none !important; }
.ss-dialog-photo:hover, .ss-dialog-photo:focus, .ss-dialog-photo:active { background: var(--ss-bg, #F6F7F8) !important; box-shadow: none !important; }
.ss-dialog-photo.ss-active { outline: 2px solid var(--ss-blue, #1771E6) !important; outline-offset: 2px !important; }
.ss-dialog-photo img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
/* Photo at full size, opened by a tile; tapping it closes it again. */
.ss-dialog-view { margin-top: 14px !important; }
.ss-dialog-view[hidden] { display: none !important; }
.ss-dialog-view img { display: block !important; max-width: 100% !important; max-height: 70vh !important; width: auto !important; height: auto !important; margin: 0 auto !important; border-radius: 10px !important; cursor: zoom-out !important; background: var(--ss-bg, #F6F7F8) !important; }
.ss-name { font-weight: 700 !important; color: var(--ss-ink-800) !important; font-size: 15px !important; }
.ss-date { color: var(--ss-ink-500) !important; font-size: 13px !important; margin-top: 2px !important; }

.ss-note { color: var(--ss-ink-600) !important; font-size: 13px !important; line-height: 1.5 !important; max-width: 80ch !important; margin: 4px 0 0 !important; }
.ss-note a { color: var(--ss-blue) !important; text-decoration: none !important; }
.ss-note a:hover { text-decoration: underline !important; }

/* Variant A: calm — white card, source chip top-right, author below divider. */
.ss-layout-calm .ss-card { width: 348px !important; max-width: 84vw !important; background: var(--ss-card-bg, #fff) !important; box-sizing: border-box !important; border: var(--ss-card-border, none) !important; border-radius: var(--ss-card-radius, 12px) !important; box-shadow: 0 4px 16px rgba(22,24,29,.06) !important; padding: 24px !important; display: flex !important; flex-direction: column !important; }
.ss-layout-calm .ss-top { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin-bottom: 14px !important; }
.ss-src-chip { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: 13px !important; font-weight: 600 !important; color: var(--ss-ink-500) !important; }
.ss-src-chip svg { width: 18px !important; height: 18px !important; flex-shrink: 0 !important; }
.ss-layout-calm .ss-text { -webkit-line-clamp: 6 !important; }
.ss-layout-calm .ss-person { display: flex !important; align-items: center !important; gap: 12px !important; margin-top: auto !important; padding-top: 16px !important; border-top: 1px solid var(--ss-divider) !important; }
.ss-layout-calm .ss-avatar { background: var(--ss-blue-bg) !important; color: var(--ss-blue) !important; }

/* Variant B: carousel with platform-style card header. */
.ss-layout-carousel .ss-card { width: 348px !important; max-width: 84vw !important; background: var(--ss-card-bg, var(--ss-bg)) !important; box-sizing: border-box !important; border: var(--ss-card-border, none) !important; border-radius: var(--ss-card-radius, 16px) !important; padding: 24px !important; position: relative !important; display: flex !important; flex-direction: column !important; }
.ss-layout-carousel .ss-person { display: flex !important; align-items: center !important; gap: 12px !important; margin-bottom: 12px !important; padding-right: 36px !important; }
.ss-layout-carousel .ss-avatar { background: var(--ss-blue-bg) !important; color: var(--ss-blue) !important; }
.ss-corner { position: absolute !important; top: 22px !important; right: 22px !important; width: 22px !important; height: 22px !important; }
.ss-corner svg { width: 22px !important; height: 22px !important; }
.ss-layout-carousel .ss-stars { margin-bottom: 10px !important; }
.ss-layout-carousel .ss-text { -webkit-line-clamp: 5 !important; }
.ss-orig { margin-top: auto !important; padding-top: 12px !important; border-top: 1px solid var(--ss-divider) !important; font-size: 13px !important; }
.ss-orig a { color: var(--ss-ink-500) !important; text-decoration: none !important; }
.ss-orig a:hover { color: var(--ss-blue) !important; }
.ss-src-name { display: inline-flex !important; align-items: center !important; gap: 6px !important; color: var(--ss-ink-500) !important; }
.ss-src-name svg { width: 16px !important; height: 16px !important; }

/* Variant C: compact strip with rating chips. */
.ss-chips { display: flex !important; gap: 10px !important; flex-wrap: wrap !important; margin: 14px 0 0 !important; }
.ss-chip { display: inline-flex !important; align-items: center !important; gap: 8px !important; background: #fff !important; border: 1px solid transparent !important; border-radius: 100px !important; padding: 8px 14px !important; font-size: 14px !important; font-weight: 600 !important; font-family: inherit !important; color: #000 !important; text-decoration: none !important; box-shadow: 0 2px 8px rgba(22,24,29,.05) !important; }
.ss-tab { cursor: pointer !important; }
.ss-tab.ss-tab-active { border-color: var(--ss-ink-900) !important; }
.ss-chip svg { width: 18px !important; height: 18px !important; }
.ss-chip .ss-val { color: #000 !important; font-weight: 700 !important; font-variant-numeric: tabular-nums !important; }
.ss-chip .ss-st { color: var(--ss-star) !important; width: 14px !important; height: 14px !important; }
.ss-layout-strip .ss-card { width: 300px !important; max-width: 78vw !important; background: var(--ss-card-bg, #fff) !important; box-sizing: border-box !important; border: var(--ss-card-border, none) !important; border-radius: var(--ss-card-radius, 10px) !important; padding: 20px !important; display: flex !important; flex-direction: column !important; }
.ss-top { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 10px !important; }
.ss-top .ss-date { margin: 0 !important; }
.ss-layout-strip .ss-text { font-size: 15px !important; -webkit-line-clamp: 4 !important; }
.ss-layout-strip .ss-person { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; margin-top: auto !important; padding-top: 12px !important; }
.ss-layout-strip .ss-name { font-size: 14px !important; }
.ss-layout-strip .ss-person svg { width: 18px !important; height: 18px !important; }

/* Layout grid: masonry (CSS multi-column) of every review, batched client-side
   with a "show more" reveal (see reviews.js). Reuses the calm card markup. */
.ss-layout-grid .ss-controls { display: none !important; }
.ss-layout-grid .ss-grid { columns: 340px 3 !important; column-gap: 24px !important; margin-top: 24px !important; }
.ss-layout-grid .ss-card { width: 100% !important; break-inside: avoid !important; margin: 0 0 24px !important; background: var(--ss-card-bg, #fff) !important; box-sizing: border-box !important; border: var(--ss-card-border, none) !important; border-radius: var(--ss-card-radius, 12px) !important; box-shadow: 0 4px 16px rgba(22,24,29,.06) !important; padding: 24px !important; display: flex !important; flex-direction: column !important; }
.ss-layout-grid .ss-card.ss-hidden { display: none !important; }
.ss-layout-grid .ss-top { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin-bottom: 14px !important; }
/* Allow taller cards than the sliders (real masonry variation); very long
   reviews still clamp and offer "read fully" (opens the dialog). */
.ss-layout-grid .ss-text { -webkit-line-clamp: 12 !important; }
.ss-layout-grid .ss-person { display: flex !important; align-items: center !important; gap: 12px !important; margin-top: 16px !important; padding-top: 16px !important; border-top: 1px solid var(--ss-divider) !important; }
.ss-layout-grid .ss-avatar { background: var(--ss-blue-bg) !important; color: var(--ss-blue) !important; }

.ss-more-all-wrap { text-align: center !important; margin-top: 8px !important; }
.ss-more-all { background: #fff !important; border: 1px solid var(--ss-divider) !important; border-radius: 100px !important; padding: 13px 32px !important; font-family: inherit !important; font-size: 15px !important; font-weight: 600 !important; color: var(--ss-ink-800) !important; cursor: pointer !important; transition: box-shadow .2s cubic-bezier(.22,.61,.36,1), transform .2s cubic-bezier(.22,.61,.36,1) !important; }
.ss-more-all:hover, .ss-more-all:focus, .ss-more-all:active { background: #fff !important; color: var(--ss-ink-800) !important; }
.ss-more-all:hover { box-shadow: 0 6px 18px rgba(22,24,29,.10) !important; transform: translateY(-1px) !important; }

/* ss_reviews_stats compact trust badge — standalone, not scoped inside
   .ss-reviews, so colours are hardcoded rather than read from its CSS vars. */
.ss-badge { display: inline-flex !important; align-items: center !important; gap: 10px !important; background: #fff !important; border-radius: 100px !important; padding: 10px 18px !important; box-shadow: 0 2px 8px rgba(22,24,29,.05) !important; text-decoration: none !important; color: inherit !important; font-family: inherit !important; }
a.ss-badge { cursor: pointer !important; transition: box-shadow .2s cubic-bezier(.22,.61,.36,1) !important; }
a.ss-badge:hover, a.ss-badge:focus-visible { box-shadow: 0 6px 18px rgba(22,24,29,.10) !important; }
.ss-badge .ss-stars { color: var(--ss-star, #FFB800) !important; flex-shrink: 0 !important; }
.ss-badge-val { font-weight: 700 !important; font-size: 16px !important; color: var(--ss-ink-900, #16181D) !important; font-variant-numeric: tabular-nums !important; }
.ss-badge-count { font-size: 14px !important; color: var(--ss-ink-500, #5C6370) !important; }

/* Full-review dialog. */
.ss-dialog { border: none !important; border-radius: 16px !important; padding: 0 !important; max-width: 560px !important; width: calc(100vw - 48px) !important; box-shadow: 0 24px 64px rgba(22,24,29,.24) !important; }
.ss-dialog::backdrop { background: rgba(22,24,29,.45) !important; }
.ss-dialog-inner { padding: 28px !important; position: relative !important; color: var(--ss-ink-800, #292828) !important; }
.ss-dialog .ss-avatar { background: var(--ss-blue-bg, #EBF4FF) !important; color: var(--ss-blue, #1771E6) !important; }
.ss-dialog .ss-person { display: flex !important; align-items: center !important; gap: 12px !important; margin-bottom: 6px !important; }
.ss-dialog-stars { margin: 10px 0 12px !important; display: inline-flex !important; gap: 2px !important; color: var(--ss-star, #FFB800) !important; }
.ss-dialog-text { white-space: pre-line !important; color: var(--ss-ink-600, #3B3F48) !important; font-size: 16px !important; line-height: 1.55 !important; max-height: 50vh !important; overflow-y: auto !important; }
.ss-dialog-close { position: absolute !important; top: 14px !important; right: 14px !important; width: 36px !important; height: 36px !important; min-width: 0 !important; padding: 0 !important; box-sizing: border-box !important; border-radius: 50% !important; border: none !important; background: var(--ss-bg, #F6F7F8) !important; color: var(--ss-ink-500, #5C6370) !important; font-size: 18px !important; line-height: 1 !important; cursor: pointer !important; display: grid !important; place-items: center !important; }
.ss-dialog-close:hover, .ss-dialog-close:focus, .ss-dialog-close:active { background: var(--ss-divider, #ECEDF1) !important; box-shadow: none !important; }

@media (max-width: 640px) {
	.ss-controls { display: none !important; }
	.ss-track { gap: 14px !important; }
}

@media (prefers-reduced-motion: reduce) {
	.ss-arrow { transition: none !important; }
}