.sa-component {
    color: var(--sa-ink);
    font-size: var(--sa-font-size, 15px);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.sa-component *, .sa-component *::before, .sa-component *::after { box-sizing: border-box; }
.sa-component [hidden], .sa-banner[hidden] { display: none !important; }

.sa-reviews { width: 100%; min-width: 0; margin-inline: auto; container: sa-reviews / inline-size; }
.sa-reviews .sa-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 16px;
    padding: 12px 16px;
    margin: 0 auto 22px;
    width: fit-content;
    max-width: 100%;
    color: var(--sa-ink);
    background: var(--sa-soft);
    border: 1px solid var(--sa-border);
    border-radius: 50px;
}
.sa-all .sa-summary { margin-inline-start: 0; }
.sa-component .sa-stars {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    color: var(--sa-muted);
    letter-spacing: .07em;
    line-height: 1.2;
}
.sa-component .sa-stars > span { opacity: .35; }
.sa-component .sa-stars::after {
    content: "★★★★★";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--sa-fill, 0%);
    overflow: hidden;
    color: var(--sa-stars);
}
.sa-component .sa-average { display: inline-flex; align-items: center; gap: .55em; }

.sylvie-boutique-global {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px 7px;
    max-width: 100%;
    color: #666;
    font-size: 13px;
    line-height: 1.2;
    text-decoration: none;
}

.sylvie-boutique-global__rating {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.sylvie-boutique-global__stars {
    position: relative;
    display: inline-block;
    color: #d9d9d9;
    font: 23px/1 Arial, sans-serif;
    letter-spacing: -2px;
}

.sylvie-boutique-global__stars-fill {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    color: #ffc400;
    white-space: nowrap;
}

.sylvie-boutique-global__average {
    color: #8a6200;
    font-size: 16px;
}

a.sylvie-boutique-global .sylvie-boutique-global__count > span {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sa-reviews .sa-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--sa-min-card), calc((100% - (var(--sa-columns) - 1) * var(--sa-spacing)) / var(--sa-columns)))), 1fr));
    align-items: stretch;
    gap: var(--sa-spacing);
}
.sa-reviews .sa-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    margin: 0;
    padding: clamp(15px, 2cqw, 24px);
    border: 1px solid var(--sa-border);
    border-radius: var(--sa-radius);
    background: var(--sa-surface);
    box-shadow: 0 5px 16px rgb(31 49 40 / 7%);
}
.sa-reviews .sa-single .sa-card { width: 100%; max-width: 520px; }
.sa-reviews .sa-review-meta { display: grid; gap: 4px; width: 100%; }
.sa-component .sa-date { color: var(--sa-muted); font-size: .85em; }
.sa-component .sa-author { color: var(--sa-ink); }
.sa-reviews .sa-review-text {
    flex: 1;
    width: 100%;
    max-height: 11em;
    overflow: auto;
    scrollbar-width: thin;
    white-space: pre-wrap;
    color: var(--sa-ink);
    background: var(--sa-soft);
    border-radius: calc(var(--sa-radius) / 1.6);
    margin: 0;
    padding: 10px 12px;
}
.sa-reviews .sa-product {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .88em;
    min-width: 0;
    color: var(--sa-ink);
}
.sa-reviews .sa-product img { flex: 0 0 32px; width: 32px; height: 32px; object-fit: cover; border-radius: 5px; }
.sa-reviews .sa-reply-trigger {
    background: transparent;
    color: var(--sa-accent);
    border: 0;
    padding: 6px 2px;
    margin: auto 0 0;
    cursor: pointer;
    font: inherit;
    font-weight: 650;
    font-size: .87em;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.sa-reply-panel {
    box-sizing: border-box;
    position: fixed;
    inset: auto;
    z-index: 2147483000;
    width: min(340px, calc(100vw - 24px));
    margin: 0;
    padding: 13px 15px;
    background: var(--sa-surface, white);
    color: var(--sa-ink, #24312b);
    border: 1px solid var(--sa-border, #e3e9e2);
    border-radius: 14px;
    box-shadow: 0 9px 30px rgb(31 49 40 / 18%);
    font: inherit;
    font-size: var(--sa-font-size, 15px);
    line-height: 1.5;
    overflow: auto;
    overflow-wrap: anywhere;
}
.sa-reply-panel:not(.sa-open) { display: none; }
.sa-reply-panel .sa-reply-heading { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.sa-reply-panel p { margin: 8px 0 0; white-space: pre-wrap; }
.sa-reply-panel .sa-reply-close { cursor: pointer; background: transparent; border: 0; color: inherit; font: inherit; font-size: 1.3em; padding: 2px 8px; }
.sa-reviews .sa-controls { text-align: center; margin-top: 22px; }
.sa-reviews .sa-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 44px;
    max-width: 100%;
    margin: 0;
    padding: 8px 20px;
    border: 1px solid transparent;
    border-radius: 30px;
    font: inherit;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    color: var(--sa-button-ink);
    background: var(--sa-button-bg);
    cursor: pointer;
}
.sa-reviews .sa-button:hover { filter: brightness(.89); color: var(--sa-button-ink); }
.sa-reviews .sa-button:disabled { opacity: .65; cursor: wait; }
.sa-reviews .sa-feedback, .sa-reviews .sa-empty { color: var(--sa-muted); }
.sa-reviews .sa-feedback:empty { display: none; }
.sa-component :focus-visible, .sa-reply-panel :focus-visible { outline: 2px solid var(--sa-accent, #516c5a); outline-offset: 3px; }

@container sa-reviews (max-width: 610px) {
    .sa-recent:not(.sa-product-reviews) .sa-grid {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: min(88%, 340px);
        padding: 4px 4px 13px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
    }
    .sa-recent:not(.sa-product-reviews) .sa-grid.sa-single { grid-auto-columns: 100%; }
    .sa-recent:not(.sa-product-reviews) .sa-card { scroll-snap-align: start; }
}

.sa-reviews.sa-home-reviews {
    box-sizing: border-box;
    padding: clamp(12px, 4.5%, 57px);
}

.sa-product-reviews .sa-grid {
    grid-template-columns: repeat(var(--sa-product-columns, 1), minmax(0, 1fr));
    gap: min(var(--sa-spacing), 1.5cqw);
}
.sa-product-reviews .sa-card {
    padding: clamp(8px, 1.5cqw, 24px);
}

@media (max-width: 767px), (hover: none) and (pointer: coarse) {
    .sa-product-reviews .sa-grid.sa-swipe {
        grid-template-columns: none;
        gap: var(--sa-spacing);
        grid-auto-flow: column;
        grid-auto-columns: min(88%, 340px);
        padding: 4px 4px 13px;
        overflow-x: auto;
        scroll-snap-type: inline proximity;
        scrollbar-width: thin;
    }
    .sa-product-reviews .sa-card { scroll-snap-align: start; }
}

.sa-banner {
    position: fixed;
    z-index: 12000;
    top: var(--sa-banner-top, 18px);
    right: max(12px, env(safe-area-inset-right));
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: min(var(--sa-banner-width), calc(100vw - 24px));
    padding: 10px clamp(12px, var(--sa-spacing), 26px);
    background: var(--sa-surface);
    border: 1px solid var(--sa-border);
    border-radius: var(--sa-radius);
    box-shadow: 0 9px 30px rgb(31 49 40 / 17%);
    overflow: hidden;
    opacity: 0;
    transform: translateX(calc(100% + max(12px, env(safe-area-inset-right))));
    transition: transform .4s ease-in, opacity .3s ease-in;
    cursor: pointer;
}
.sa-banner.sa-in, .sa-banner.sa-banner-preview { opacity: 1; transform: none; }
.sa-banner.sa-in { transition: transform 1s cubic-bezier(.23, .8, .28, 1), opacity .75s ease-out; }
.sa-banner:not(.sa-banner-preview)::after {
    content: "";
    position: absolute;
    inset: -35% auto -35% 0;
    width: 34%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgb(224 171 57 / 26%) 25%, rgb(255 248 205 / 85%) 51%, rgb(242 186 70 / 34%) 72%, transparent);
    transform: translateX(-120%) skewX(-18deg);
    opacity: 0;
}
.sa-banner.sa-settled::after { animation: sa-banner-sheen 2.7s ease-in-out infinite; }
@keyframes sa-banner-sheen {
    0% { transform: translateX(-120%) skewX(-18deg); opacity: 0; }
    12%, 64% { opacity: 1; }
    77%, 100% { transform: translateX(415%) skewX(-18deg); opacity: 0; }
}
.sa-banner.sa-banner-preview { position: relative; inset: auto; max-width: 100%; cursor: auto; }
.sa-banner .sa-ring { display: block; }
.sa-banner .sa-ring circle { fill: none; stroke-width: 2.8; }
.sa-banner .sa-ring-track { stroke: var(--sa-border); }
.sa-banner .sa-ring-progress {
    stroke: var(--sa-accent);
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: var(--sa-progress, 28);
    transform: rotate(-90deg);
    transform-origin: center;
}
.sa-banner .sa-banner-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 9px; font-size: .85em; }
.sa-banner .sa-banner-date { color: var(--sa-muted); }
.sa-banner .sa-banner-text {
    max-height: 3em;
    overflow-y: auto;
    scrollbar-width: thin;
    overscroll-behavior: contain;
    white-space: pre-wrap;
}
.sa-banner .sa-banner-link { display: inline-block; color: var(--sa-accent); font-size: .82em; font-weight: 700; text-underline-offset: 3px; }
body.admin-bar .sa-banner:not(.sa-banner-preview) { top: calc(var(--sa-banner-top, 18px) + 32px); }
@media (max-width: 782px) {
    body.admin-bar .sa-banner:not(.sa-banner-preview) { top: calc(var(--sa-banner-top, 18px) + 46px); }
}
@media (max-width: 767px) { .sa-banner:not(.sa-banner-preview) { display: none !important; } }
@media (pointer: coarse) and (max-height: 599px) { .sa-banner:not(.sa-banner-preview) { display: none !important; } }
@media (min-width: 768px) and (max-width: 1023px), (pointer: coarse) {
    .sa-banner[data-sa-tablet="no"]:not(.sa-banner-preview) { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    .sa-banner, .sa-banner.sa-in { transition: none; }
    .sa-banner.sa-settled::after { animation: none; }
}
.sa-banner .sa-banner-stars { color: var(--sa-stars); }