/* Prime Store Reviews storefront (plan 094). Scoped to .prime-sr*. Every colour comes from the theme colour group «Відгуки про магазин»
   (--prime-color-store-reviews-*, also picked by the live colour mode); the second value of each var() is only a safety net. */
.prime-sr {
  --sr-card: var(--prime-color-store-reviews-card-bg, #ffffff); --sr-border: var(--prime-color-store-reviews-card-border, #e5e7eb);
  --sr-text: var(--prime-color-store-reviews-text, #374151); --sr-muted: var(--prime-color-store-reviews-muted, #6b7280);
  --sr-star: var(--prime-color-store-reviews-star, #f5a623); --sr-star-empty: var(--prime-color-store-reviews-star-empty, #d1d5db);
  --sr-link: var(--prime-color-store-reviews-link, #1f6feb); --sr-btn-bg: var(--prime-color-store-reviews-btn-bg, #1f6feb);
  --sr-btn-text: var(--prime-color-store-reviews-btn-text, #ffffff); --sr-btn-hover: var(--prime-color-store-reviews-btn-hover-bg, #1957bd);
  --sr-staff-bg: var(--prime-color-store-reviews-staff-bg, #f3f6fb); --sr-error: #b42318;
}
.prime-sr *, .prime-sr *::before, .prime-sr *::after { box-sizing: border-box; }
.prime-sr-page { color: var(--sr-text); max-width: 100%; }
.prime-sr-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.prime-sr-summary { display: grid; grid-template-columns: minmax(140px, 180px) 1fr auto; gap: 24px 32px; align-items: center; padding: 20px 22px; margin: 0 0 28px; background: var(--sr-card); border: 1px solid var(--sr-border); border-radius: 12px; }
.prime-sr-score { text-align: center; min-width: 140px; }
.prime-sr-score-value { font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.prime-sr-score .prime-sr-stars { justify-content: center; gap: 4px; margin: 10px 0 6px; font-size: 24px; }
.prime-sr-score-max { font-size: 16px; font-weight: 400; color: var(--sr-muted); }
.prime-sr-score-count { font-size: 15px; color: var(--sr-muted); }
.prime-sr-stars { display: inline-flex; gap: 2px; font-size: 18px; line-height: 1; }
.prime-sr-star { color: var(--sr-star-empty); }
.prime-sr-star.is-on { color: var(--sr-star); }
.prime-sr-bars { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; min-width: 0; }
.prime-sr-bars li { display: grid; grid-template-columns: 34px minmax(0, 1fr) 48px; gap: 10px; align-items: center; margin: 0; font-size: 15px; color: var(--sr-muted); }
.prime-sr-bar-label { width: 34px; white-space: nowrap; }
.prime-sr-bar { height: 12px; background: var(--sr-border); border-radius: 999px; overflow: hidden; }
.prime-sr-bar-fill { display: block; height: 100%; max-width: 100%; border-radius: inherit; background: var(--sr-star); }
.prime-sr-bar-count { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.prime-sr-empty { margin: 0; color: var(--sr-muted); grid-column: 1 / 3; }
.prime-sr-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 22px; font: inherit; font-size: 16px; text-align: center; color: var(--sr-btn-text); background: var(--sr-btn-bg); border: 1px solid var(--sr-btn-bg); border-radius: 6px; cursor: pointer; }
.prime-sr-btn:hover { background: var(--sr-btn-hover); border-color: var(--sr-btn-hover); }
/* The theme colours every `#content a:not(.btn)` with the link colour; a link-styled button needs the stronger selector or its text matches its background. */
.prime-sr a.prime-sr-btn, .prime-theme #content .prime-sr a.prime-sr-btn { color: var(--sr-btn-text); text-decoration: none; }
.prime-sr a.prime-sr-btn-ghost, .prime-theme #content .prime-sr a.prime-sr-btn-ghost { color: var(--sr-text); }
.prime-sr a.prime-sr-btn:hover, .prime-theme #content .prime-sr a.prime-sr-btn:hover { color: var(--sr-btn-text); }
.prime-sr-btn-ghost, .prime-sr-btn-ghost:hover { color: var(--sr-text); background: transparent; border-color: var(--sr-border); }
.prime-sr-write, .prime-sr-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 22px; font-size: 16px; line-height: 1.2; text-align: center; text-shadow: none; white-space: nowrap; }
.prime-sr-write { grid-column: 3; }
.prime-sr .prime-sr-btn:focus-visible, .prime-sr-link:focus-visible, .prime-sr-form input:focus-visible, .prime-sr-form textarea:focus-visible, .prime-sr-rate input:focus-visible + label { outline: 3px solid var(--sr-link); outline-offset: 2px; }
.prime-sr-login { margin: 0 0 20px; padding: 14px 18px; font-size: 17px; line-height: 1.5; background: var(--sr-staff-bg); border: 1px solid var(--sr-border); border-radius: 12px; }
.prime-sr-login a { font-weight: 600; text-decoration: underline; }
.prime-sr-form-wrap { margin: 0 0 20px; }
.prime-sr-form { padding: 20px 22px; border: 1px solid var(--sr-border); border-radius: 12px; }
.prime-sr-form-title { margin: 0 0 14px; font-size: 20px; }
.prime-sr-field { margin: 0 0 14px; border: 0; padding: 0; min-width: 0; }
.prime-sr-field label, .prime-sr-field legend { display: block; margin: 0 0 6px; padding: 0; font-size: 15px; font-weight: 600; border: 0; }
.prime-sr-field input[type="text"], .prime-sr-field textarea { width: 100%; padding: 10px 12px; font: inherit; font-size: 16px; color: var(--sr-text); background: var(--sr-card); border: 1px solid var(--sr-border); border-radius: 6px; }
.prime-sr-note { margin-top: 4px; font-size: 14px; color: var(--sr-muted); }
.prime-sr-err { margin-top: 4px; font-size: 14px; color: var(--sr-error); }
.prime-sr-err:empty { display: none; }
.prime-sr-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.prime-sr-rate { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.prime-sr-rate input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.prime-sr-rate label { margin: 0; font-size: 30px; line-height: 1; color: var(--sr-star-empty); cursor: pointer; }
.prime-sr-rate input:checked ~ label, .prime-sr-rate label:hover, .prime-sr-rate label:hover ~ label { color: var(--sr-star); }
.prime-sr-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.prime-sr-banner { margin: 0 0 14px; padding: 10px 14px; color: var(--sr-error); background: #fdecea; border-radius: 6px; }
.prime-sr-success { margin: 0 0 20px; padding: 14px 18px; color: #14532d; background: #e7f6ec; border-radius: 6px; }
.prime-sr-list { display: grid; gap: 16px; min-width: 0; }
.prime-sr-card { min-width: 0; padding: 20px 22px; background: var(--sr-card); border: 1px solid var(--sr-border); border-radius: 12px; overflow-wrap: anywhere; }
.prime-sr-card-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px 14px; align-items: start; margin: 0 0 12px; min-width: 0; }
.prime-sr-card-head .prime-sr-stars { margin-top: 4px; font-size: 19px; }
.prime-sr-date { font-size: 14px; color: var(--sr-muted); white-space: nowrap; }
.prime-sr-meta { display: flex; flex-direction: column; min-width: 0; }
.prime-sr-author { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.prime-sr-reply-date { font-size: 14px; color: var(--sr-muted); }
.prime-sr-avatar { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; flex: none; font-size: 18px; font-weight: 600; text-transform: uppercase; background: #e5e7eb; color: #1f2937; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(17, 24, 39, .14); }
.prime-sr-avatar-sm { width: 36px; height: 36px; font-size: 14px; }
.prime-sr-tone-0 { background: #fde68a; color: #78350f; } .prime-sr-tone-1 { background: #bae6fd; color: #075985; } .prime-sr-tone-2 { background: #bbf7d0; color: #166534; } .prime-sr-tone-3 { background: #fbcfe8; color: #9d174d; }
.prime-sr-tone-4 { background: #ddd6fe; color: #5b21b6; } .prime-sr-tone-5 { background: #fed7aa; color: #9a3412; } .prime-sr-tone-6 { background: #99f6e4; color: #115e59; } .prime-sr-tone-7 { background: #c7d2fe; color: #3730a3; }
.prime-sr-text { margin: 0 0 10px; font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; word-break: break-word; }
.prime-sr-staff { margin: 12px 0 0; padding: 12px 14px; background: var(--sr-staff-bg); border-radius: 8px; }
.prime-sr-staff strong { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--sr-muted); }
.prime-sr-staff p { margin: 0; }
.prime-sr-reply { display: flex; gap: 12px; margin: 14px 0 0 20px; padding: 16px 18px; background: var(--sr-staff-bg); border-left: 3px solid var(--sr-star); border-radius: 12px; }
.prime-sr-link { margin-top: 10px; padding: 6px 0; font: inherit; font-size: 15px; color: var(--sr-link); background: none; border: 0; cursor: pointer; }
.prime-sr-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 20px; }
.prime-sr-results { font-size: 14px; color: var(--sr-muted); }
@media (max-width: 767.98px) { .prime-sr-summary { grid-template-columns: 1fr; } .prime-sr-empty, .prime-sr-write { grid-column: auto; } .prime-sr-write { width: 100%; } .prime-sr-card { padding: 16px; } .prime-sr-reply { margin-left: 12px; } .prime-sr-card-head { grid-template-columns: auto minmax(0, 1fr); } .prime-sr-date { grid-column: 2; white-space: normal; } }
@media (prefers-reduced-motion: reduce) { .prime-sr * { transition: none !important; } }
/* Layout block: heading uses the shared module title class; cards are borderless with a soft shadow, a quote mark and the author at the bottom.
   grid = N columns (2 on tablets, 1 on phones); carousel = one scrolling strip with snap points. */
.prime-sr-widget { margin: 0 0 28px; color: var(--sr-text); }
.prime-sr-widget-rating { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; margin: -4px 0 20px; font-size: 14px; color: var(--sr-muted); }
.prime-sr-widget-rating-value { font-size: 20px; font-weight: 700; color: var(--sr-text); }
.prime-sr-widget-rating .prime-sr-stars { font-size: 16px; }
.prime-sr-widget-list { list-style: none; margin: 0 0 20px; padding: 0; }
.prime-sr-widget--grid .prime-sr-widget-list { display: grid; gap: 16px; grid-template-columns: repeat(var(--sr-cols, 3), minmax(0, 1fr)); }
.prime-sr-widget--cols-1 { --sr-cols: 1; } .prime-sr-widget--cols-2 { --sr-cols: 2; } .prime-sr-widget--cols-3 { --sr-cols: 3; } .prime-sr-widget--cols-4 { --sr-cols: 4; }
.prime-sr-widget--carousel .prime-sr-widget-list { display: flex; gap: 16px; overflow-x: auto; padding: 4px 2px 14px; scroll-snap-type: x mandatory; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.prime-sr-widget--carousel .prime-sr-widget-item { flex: 0 0 calc((100% - (var(--sr-cols, 3) - 1) * 16px) / var(--sr-cols, 3)); min-width: 240px; scroll-snap-align: start; }
.prime-sr-widget-item { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 18px; background: var(--sr-card); border: 1px solid var(--sr-border); border-radius: 16px; box-shadow: 0 6px 20px rgba(17, 24, 39, .06); transition: box-shadow .2s ease, transform .2s ease; }
.prime-sr-widget-item:hover { box-shadow: 0 10px 28px rgba(17, 24, 39, .1); transform: translateY(-2px); }
.prime-sr-widget-top { display: flex; align-items: flex-start; justify-content: space-between; }
.prime-sr-widget-top .prime-sr-stars { font-size: 17px; }
.prime-sr-widget-quote { font-family: Georgia, "Times New Roman", serif; font-size: 56px; line-height: .7; color: var(--sr-link); opacity: .18; user-select: none; }
.prime-sr-widget-item .prime-sr-text { flex: 1; font-size: 15px; line-height: 1.6; color: var(--sr-text); }
.prime-sr-widget-more { align-self: flex-start; font-size: 13px; font-weight: 600; }
.prime-sr a.prime-sr-widget-more, .prime-theme #content .prime-sr a.prime-sr-widget-more { color: var(--sr-link); text-decoration: none; }
.prime-sr a.prime-sr-widget-more:hover, .prime-theme #content .prime-sr a.prime-sr-widget-more:hover { color: var(--sr-link); text-decoration: underline; }
.prime-sr-widget-author { display: flex; align-items: center; gap: 10px; padding-top: 12px; margin-top: 2px; border-top: 1px solid var(--sr-border); }
.prime-sr-widget-author .prime-sr-avatar { width: 36px; height: 36px; font-size: 15px; }
.prime-sr-widget-foot { display: flex; justify-content: center; }
.prime-sr-widget-all { min-height: 42px; padding: 8px 26px; font-size: 15px; font-weight: 600; border-radius: 999px; text-decoration: none; }
@media (max-width: 991px) { .prime-sr-widget--grid .prime-sr-widget-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .prime-sr-widget--grid.prime-sr-widget--cols-1 .prime-sr-widget-list { grid-template-columns: 1fr; } }
@media (max-width: 575px) { .prime-sr-widget--grid .prime-sr-widget-list { grid-template-columns: 1fr; } .prime-sr-widget--carousel .prime-sr-widget-item { flex-basis: 82%; } }
@media (prefers-reduced-motion: reduce) { .prime-sr-widget-item { transition: none; } .prime-sr-widget-item:hover { transform: none; } }
/* Phones: a grid block can still scroll as a carousel (widget_mobile_carousel). */
@media (max-width: 575px) {
  .prime-sr-widget--grid.prime-sr-widget--m-carousel .prime-sr-widget-list { display: flex; gap: 16px; overflow-x: auto; padding: 4px 2px 14px; scroll-snap-type: x mandatory; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .prime-sr-widget--grid.prime-sr-widget--m-carousel .prime-sr-widget-item { flex: 0 0 82%; min-width: 240px; scroll-snap-align: start; }
}