/* lsd-reviews — frontend form styles
 * On-brand with lsd-legal.com (see DESIGN.md). */

/* Twemoji Country Flags — webfont fallback for systems whose default
 * emoji font lacks flag glyphs (notably Windows: Segoe UI Emoji has
 * stripped the regional-indicator codepoints since 2014). The unicode-
 * range targets U+1F1E6..U+1F1FF only, so all other emoji keep using
 * the platform's native font. macOS/iOS/Android rendering is unchanged. */
@font-face {
    font-family: "Twemoji Country Flags";
    src: url("../fonts/TwemojiCountryFlags.woff2") format("woff2");
    /* iOS Safari: 'swap' caused a flash where Apple Color Emoji renders
       first (color-leaks onto sibling text) before Twemoji loads. 'block'
       waits up to 3s for Twemoji, never falls back to Apple Color Emoji. */
    font-display: block;
    unicode-range: U+1F1E6-1F1FF;
}

.lsdr-card__flag,
.lsdr-form__country-flag {
    font-family: "Twemoji Country Flags", -apple-system, BlinkMacSystemFont, "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
    font-style: normal;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    -webkit-text-fill-color: initial;
    /* WebKit COLR-glyph paint-state leak (#281739, #283340, #304249):
       cached COLR display-lists contaminate lastDrawingState so following
       text paints with the wrong fill-color. Belt-and-suspenders against
       it: contain paint + isolation + GPU layer to force a paint barrier
       between this flag run and the sibling .lsdr-card__when run. */
    isolation: isolate;
    contain: paint;
    transform: translateZ(0);
}

/* iOS Safari only: skip Twemoji COLR webfont entirely, use Apple Color
   Emoji (SBIX format) like the Country-Gate plugin does — no COLR =
   no paint-state-leak bug. The @supports query targets iOS Safari
   specifically (-webkit-touch-callout is iOS-only). */
@supports (-webkit-touch-callout: none) {
    .lsdr-card__flag,
    .lsdr-form__country-flag {
        font-family: "Apple Color Emoji", -apple-system, sans-serif !important;
    }
}

/* Post-submit status banner. Tenger 2026-04-29: silent fails surfaced
 * as "nothing happened". Tenger 2026-04-30: banner looked too thin /
 * full-bleed — match the form-card width + give it cool-blue shadow
 * so it sits naturally on the page even when the form itself doesn't
 * render (e.g. all-reviewed state). */
.lsdr-form__flash {
    max-width: 680px;
    margin: 32px auto 24px;
    padding: 18px 24px;
    border-radius: 12px;
    border-left-width: 4px;
    border-left-style: solid;
    font: 500 14.5px/1.55 'Lato', system-ui, sans-serif;
    box-shadow: rgba(39, 92, 141, 0.08) 8px 8px 36px 0;
}
.lsdr-form__flash p {
    margin: 0;
}
.lsdr-form__flash--success {
    background: #ECFDF5;
    color: #065F46;
    border: 1px solid #A7F3D0;
    border-left-color: #10B981;
}
.lsdr-form__flash--error {
    background: #FEF2F2;
    color: #991B1B;
    border: 1px solid #FECACA;
    border-left-color: #DC2626;
}

/* Two-layer star widget — grey background + gold fill clipped to width%.
 * Half-stars (and any precision below) fall out for free: 4.67/5 = 93.4%
 * of the gold layer is visible, so the fifth star renders ~⅔ filled.
 * The container inherits font-size + letter-spacing from its parent
 * (.lsdr-card__stars, .lsdr-form__preview-product-stars, …) so we don't
 * have to repeat sizing for every consumer. */
.lsdr-stars {
    position: relative;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
}
.lsdr-stars__bg,
.lsdr-stars__fill {
    display: inline-block;
    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
}
.lsdr-stars__bg {
    color: #E0DFDC;
}
.lsdr-stars__fill {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    color: #FFB400;
}

.lsdr-form {
    --lsd-gradient-brand: linear-gradient(
        90deg,
        #E3166F 0%, #EF2D86 13.59%, #F5927A 29.83%,
        #84DCB2 47.10%, #43DAAF 64.81%, #1EB8DA 81.04%, #5368E2 100%
    );
    --lsd-magenta: #E3166F;
    --lsd-gold: #FFB400;
    --lsd-mist: #ECECEC;
    --lsd-quiet: #888;
    --lsd-hush: #999;
    --lsd-slate: #3F3F3F;

    max-width: 680px;
    margin: 48px auto;
    padding: 56px 56px 48px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04),
                10px 10px 50px 3px rgba(39, 92, 141, 0.10);
    color: #222;
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    line-height: 1.5;
}

.lsdr-form .lsdr-form__hello {
    font-size: 14px !important;
    color: var(--lsd-quiet);
    letter-spacing: 0.2px;
    font-weight: 500;
    margin: 0 0 12px !important;
}

.lsdr-form h1.lsdr-form__title {
    font-size: 26px !important;
    line-height: 1.2 !important;
    margin: 0 0 14px !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em;
    color: #000;
}

.lsdr-form .lsdr-form__transparency {
    font-size: 15px !important;
    color: #555 !important;
    margin: 0 0 40px !important;
    max-width: 55ch;
    line-height: 1.55 !important;
    font-weight: 400 !important;
}

/* Visually-hidden helper for sr-only legends */
.lsdr-form .lsdr-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Product cards with inline star rating (one per product in order) */
.lsdr-form .lsdr-form__products {
    list-style: none !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    border-top: 1px solid var(--lsd-mist);
}

.lsdr-form .lsdr-form__product {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 18px 0;
    margin: 0 !important;
    border-bottom: 1px solid var(--lsd-mist);
}

.lsdr-form .lsdr-form__product:last-child {
    border-bottom: 0;
}

.lsdr-form .lsdr-form__product .lsdr-rating {
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    grid-column: 3;
    padding: 0;
    margin: 0;
    display: block;
}

.lsdr-form .lsdr-form__product-img {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    object-fit: cover;
    background: #fff;
    border: 1px solid var(--lsd-mist);
    display: block;
}

.lsdr-form .lsdr-form__product-img--placeholder {
    background: linear-gradient(135deg, #E3166F22, #1EB8DA33);
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.lsdr-form .lsdr-form__product-name {
    font-weight: 600 !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    color: #3F3F3F !important;
}

.lsdr-form .lsdr-form__product-meta {
    font-size: 11px !important;
    color: var(--lsd-hush) !important;
    margin: 4px 0 0 !important;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 500 !important;
}

/* Rating rows — listen-style like the multi-product mockup */
.lsdr-rating {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 20px 0;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--lsd-mist);
}

.lsdr-rating:last-of-type {
    border-bottom: 1px solid var(--lsd-mist);
}

.lsdr-form .lsdr-rating legend {
    font-weight: 600 !important;
    font-size: 15px !important;
    color: #3F3F3F !important;
    margin: 0 !important;
    padding: 0 !important;
    float: left;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.lsdr-rating > div[role="radiogroup"] {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 2px;
    grid-column: 2;
}

.lsdr-rating__star input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.lsdr-rating__star {
    cursor: pointer;
    font-size: 30px;
    line-height: 1;
    padding: 2px;
    user-select: none;
}

.lsdr-rating__icon {
    display: inline-block;
    color: #E0DFDC;
    transition: color 0.15s ease, transform 0.15s ease;
}

/* Reverse-flex star fill: hover (or :has-checked) lights up the
 * hovered/selected star plus all siblings to its right (which is left
 * visually because of row-reverse). Inputs are nested inside labels,
 * so we need :has() to bubble the :checked state up to the label. */
.lsdr-rating__star:hover .lsdr-rating__icon,
.lsdr-rating__star:hover ~ .lsdr-rating__star .lsdr-rating__icon,
.lsdr-rating > div[role="radiogroup"]:not(:hover) .lsdr-rating__star:has(input:checked) .lsdr-rating__icon,
.lsdr-rating > div[role="radiogroup"]:not(:hover) .lsdr-rating__star:has(input:checked) ~ .lsdr-rating__star .lsdr-rating__icon {
    color: var(--lsd-gold);
}

.lsdr-rating__star:hover .lsdr-rating__icon {
    transform: scale(1.12);
}

.lsdr-rating__star input[type="radio"]:focus-visible + .lsdr-rating__icon {
    outline: 2px solid var(--lsd-magenta);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Block separators */
.lsdr-form__field {
    margin-top: 36px;
}

.lsdr-form__field label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin: 0 0 12px;
    color: #222;
}

.lsdr-form__field textarea {
    width: 100%;
    min-height: 140px;
    box-sizing: border-box;
    border: 1px solid #D8D6D2;
    border-radius: 10px;
    padding: 14px 16px;
    font: 400 15px/1.55 'Lato', sans-serif;
    color: #222;
    background: #fff;
    resize: vertical;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lsdr-form__field textarea:focus {
    outline: none;
    border-color: var(--lsd-magenta);
    box-shadow: 0 0 0 3px rgba(227, 22, 111, 0.12);
}

.lsdr-form__help {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    color: var(--lsd-quiet);
}

/* Anonymous toggle — sits above consent. Same layout as consent but with
 * a two-line label (bold heading + muted subtext). */
.lsdr-form__anonymous {
    margin-top: 28px;
}

.lsdr-form__anonymous label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    font-weight: 400;
    color: #333;
    line-height: 1.4;
    margin: 0;
    cursor: pointer;
}

.lsdr-form__anonymous input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: var(--lsd-magenta);
    width: 16px;
    height: 16px;
}

.lsdr-form__anonymous-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lsdr-form__anonymous-text strong {
    font-weight: 600;
    color: #222;
}

.lsdr-form__anonymous-text small {
    font-size: 12px;
    color: var(--lsd-quiet);
}

/* Consent */
.lsdr-form__consent {
    margin-top: 16px;
}

.lsdr-form__consent label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    font-weight: 400;
    color: #555;
    line-height: 1.55;
    margin: 0;
}

.lsdr-form__consent input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: var(--lsd-magenta);
    width: 16px;
    height: 16px;
}

.lsdr-form__consent a {
    color: var(--lsd-magenta);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.lsdr-form__consent a:hover { text-decoration: none; }

/* Preview — shown after the user touches a star or types in the textarea.
 * Visually mirrors the public listing card (.lsdr-card) so it gives a
 * truthful prediction of what's about to be published. */
.lsdr-form__preview {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--lsd-mist);
}

.lsdr-form__preview-eyebrow {
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 600;
    font-size: 11px;
    color: var(--lsd-quiet);
    margin: 0 0 4px;
}

.lsdr-form__preview-help {
    font-size: 13px;
    color: var(--lsd-quiet);
    margin: 0 0 18px;
}

.lsdr-form__preview .lsdr-card {
    background: #fff;
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04),
                10px 10px 50px 3px rgba(39, 92, 141, 0.10);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lsdr-form__preview .lsdr-card__stars {
    color: var(--lsd-gold);
    font-size: 18px;
    letter-spacing: 3px;
    line-height: 1;
}

.lsdr-form__preview .lsdr-card__body {
    font-size: 14.5px;
    line-height: 1.6;
    color: #333;
    margin: 0;
}

.lsdr-form__preview-placeholder {
    color: var(--lsd-hush);
    font-style: italic;
    margin: 0;
}

.lsdr-form__preview .lsdr-card__footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--lsd-mist);
    font-size: 12px;
    color: var(--lsd-quiet);
}

.lsdr-form__preview .lsdr-card__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #E3166F22, #1EB8DA33);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    color: var(--lsd-magenta);
    flex-shrink: 0;
    line-height: 1;
}

.lsdr-form__preview .lsdr-card__person {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.lsdr-form__preview .lsdr-card__author {
    font-weight: 600;
    color: var(--lsd-slate);
    font-size: 13px;
}

.lsdr-form__preview .lsdr-card__meta {
    color: var(--lsd-hush);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 1px;
}

.lsdr-form__preview .lsdr-card__verified {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(67, 218, 175, 0.12);
    color: #1F8D63;
    font: 600 10.5px/1 'Lato', sans-serif;
    padding: 5px 9px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lsdr-form__preview .lsdr-card__verified::before {
    content: "✓";
    font-size: 11px;
    font-weight: 700;
}

/* Per-product star list — sits below the main preview card and shows
 * the customer that each product gets its own rating on the product
 * page, while the body text above is the single shared review. */
.lsdr-form__preview-products-help {
    margin: 22px 0 10px;
    font-size: 12px;
    color: var(--lsd-quiet);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
}

.lsdr-form__preview-products {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.lsdr-form__preview-product {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--lsd-mist);
}

.lsdr-form__preview-product:last-child {
    border-bottom: 1px solid var(--lsd-mist);
}

.lsdr-form__preview-product-name {
    font-size: 13.5px;
    color: var(--lsd-slate);
    font-weight: 500;
}

.lsdr-form__preview-product-stars {
    font-size: 16px;
    letter-spacing: 2px;
    line-height: 1;
}

/* button-lsd pattern — matches the live lsd-legal.com button-wrapper.
 * Selector specificity is bumped to `.lsdr-form button.lsdr-form__submit`
 * and structural props use !important because the parent theme styles
 * `<button type="submit">` globally (padding/border/border-radius). */
.lsdr-form button.lsdr-form__submit {
    position: relative;
    display: inline-block;
    margin-top: 36px;
    background: var(--lsd-gradient-brand) !important;
    background-size: 40% !important;
    border-radius: 30px !important;
    border: 0 !important;
    padding: 0 !important;
    z-index: 1;
    cursor: pointer;
    color: #000;
    font: inherit;
    box-shadow: none !important;
    text-shadow: none !important;
    height: auto !important;
    width: auto !important;
    line-height: normal !important;
}

.lsdr-form button.lsdr-form__submit::before {
    content: "";
    position: absolute;
    inset: -3px;
    z-index: -1;
    background: var(--lsd-gradient-brand);
    border-radius: 35px;
    transition: filter 0.8s ease;
}

.lsdr-form button.lsdr-form__submit:hover::before {
    filter: blur(20px);
}

.lsdr-form button.lsdr-form__submit:focus-visible {
    outline: 2px solid var(--lsd-gold);
    outline-offset: 3px;
}

.lsdr-form .lsdr-form__submit-label {
    display: block;
    background: rgba(255, 255, 255, 0.95);
    color: #000;
    font: 600 15px/1 'Lato', sans-serif;
    padding: 14px 28px;
    border-radius: 25px;
    position: relative;
    z-index: 2;
}

/* Trust footnote */
.lsdr-form__trust {
    margin-top: 44px;
    padding-top: 24px;
    border-top: 1px solid #F0EEEA;
    font-size: 12px;
    color: var(--lsd-hush);
    line-height: 1.6;
}

/* ─────────────────────────────────────────────────────────────
 * Review feed (/reviews/ page + product tabs) — Tile-Grid (A)
 * White cards, cool-blue shadow, Inter typography, gradient
 * hairline on aggregate strip, Sunlit-Gold stars, Hot-Magenta
 * accents for links/focus. Mirrors mockup-reviews-list.html.
 * ───────────────────────────────────────────────────────────── */
.lsdr-feed {
    --lsd-gradient-brand: linear-gradient(
        90deg,
        #E3166F 0%, #EF2D86 13.59%, #F5927A 29.83%,
        #84DCB2 47.10%, #43DAAF 64.81%, #1EB8DA 81.04%, #5368E2 100%
    );
    --lsd-magenta: #E3166F;
    --lsd-gold: #FFB400;
    --lsd-mist: #ECECEC;
    --lsd-quiet: #888;
    --lsd-hush: #999;
    --lsd-slate: #3F3F3F;
    --lsd-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.04),
                       10px 10px 50px 3px rgba(39, 92, 141, 0.10);

    max-width: 1200px;
    margin: 56px auto 80px;
    padding: 0 24px;
    color: #222;
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

/* Header block */
.lsdr-feed__header {
    text-align: center;
    margin: 0 0 48px;
}

.lsdr-feed__eyebrow {
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 600 !important;
    font-size: 12px !important;
    color: var(--lsd-quiet) !important;
    margin: 0 0 14px !important;
}

.lsdr-feed h2.lsdr-feed__title,
.lsdr-feed .lsdr-feed__title {
    font-weight: 800 !important;
    font-size: 42px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 18px !important;
    color: #000 !important;
}

.lsdr-feed .lsdr-feed__transparency {
    font-size: 15px !important;
    color: #555 !important;
    line-height: 1.6 !important;
    margin: 0 auto !important;
    max-width: 56ch;
    font-weight: 400 !important;
}

/* Aggregate strip */
.lsdr-feed .lsdr-aggregate {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 36px;
    padding: 28px 36px;
    margin: 0 0 32px;
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--lsd-card-shadow);
    position: relative;
    overflow: hidden;
}

.lsdr-feed .lsdr-aggregate::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--lsd-gradient-brand);
}

.lsdr-feed .lsdr-aggregate__num {
    font-weight: 800;
    font-size: 48px;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #000;
}

.lsdr-feed .lsdr-aggregate__stars {
    color: var(--lsd-gold);
    font-size: 22px;
    letter-spacing: 4px;
    margin: 6px 0 4px;
    line-height: 1;
}

.lsdr-feed .lsdr-aggregate__count {
    font-size: 13px;
    color: var(--lsd-quiet);
    line-height: 1.4;
}

.lsdr-aggregate__primary {
    display: block;
}

.lsdr-aggregate__detail {
    display: block;
    font-size: 12px;
    color: var(--lsd-quiet);
    opacity: 0.85;
    margin-top: 2px;
}

.lsdr-feed .lsdr-aggregate__bars {
    display: grid;
    gap: 6px;
    min-width: 280px;
    max-width: 420px;
    justify-self: end;
    width: 100%;
}

.lsdr-feed .lsdr-bar-row {
    display: grid;
    grid-template-columns: 14px 1fr 36px;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--lsd-quiet);
}

.lsdr-feed .lsdr-bar-track {
    height: 6px;
    background: var(--lsd-mist);
    border-radius: 999px;
    overflow: hidden;
}

.lsdr-feed .lsdr-bar-fill {
    display: block;
    height: 100%;
    background: var(--lsd-gold);
    border-radius: 999px;
}

/* Card grid */
.lsdr-feed__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 0;
}

.lsdr-feed .lsdr-card {
    background: #fff;
    border-radius: 14px;
    padding: 26px 26px 24px;
    box-shadow: var(--lsd-card-shadow);
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lsdr-feed .lsdr-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04),
                14px 14px 60px 3px rgba(39, 92, 141, 0.14);
}

.lsdr-feed .lsdr-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lsdr-feed .lsdr-card__stars {
    color: var(--lsd-gold);
    font-size: 18px;
    line-height: 1;
    letter-spacing: 3px;
}

/* Product header on the global /reviews/ feed: tells the visitor which
   item this rating is for so two cards from the same multi-product order
   (same body text + author) read as distinct reviews. Skipped on PDP
   feeds because the product is implicit. */
.lsdr-card__product {
    margin: 4px 0 0;
    font: 500 12px/1.4 'Lato', sans-serif;
    color: #6b7785;
    letter-spacing: 0.02em;
}

.lsdr-card__product-label {
    text-transform: uppercase;
    color: #99a3ad;
    margin-right: 4px;
}

.lsdr-card__product-link,
.lsdr-card__product-name {
    color: #2a3540;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.12s ease;
}

.lsdr-card__product-link:hover {
    border-bottom-color: #2a3540;
}

.lsdr-feed .lsdr-card__body {
    font-size: 14.5px;
    line-height: 1.6;
    color: #444;
    margin: 0;
    flex: 1;
}

.lsdr-feed .lsdr-card__body p {
    margin: 0 0 8px;
}

.lsdr-feed .lsdr-card__body p:last-child {
    margin: 0;
}

.lsdr-feed .lsdr-card__breakdown,
.lsdr-form__preview .lsdr-card__breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
    padding: 12px 0 0;
    font: 500 12px/1.4 'Lato', sans-serif;
    color: var(--lsd-quiet);
}

.lsdr-feed .lsdr-card__breakdown-item,
.lsdr-form__preview .lsdr-card__breakdown-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.lsdr-feed .lsdr-card__breakdown dt,
.lsdr-form__preview .lsdr-card__breakdown dt {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--lsd-hush);
    font-weight: 600;
    font-size: 11px;
}

.lsdr-feed .lsdr-card__breakdown dd,
.lsdr-form__preview .lsdr-card__breakdown dd {
    margin: 0;
    color: var(--lsd-gold);
    letter-spacing: 2px;
    font-size: 14px;
    line-height: 1;
}

/* Per-product star list inside an order-grouped card.
 * Shows each rated product with its specific star count, so the customer
 * understands "this card represents one customer's order, with N products". */
.lsdr-feed .lsdr-card__products {
    margin: 12px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--lsd-mist);
    display: grid;
    gap: 6px;
}

.lsdr-feed .lsdr-card__products-label {
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--lsd-hush);
    margin: 0 0 4px;
}

.lsdr-feed .lsdr-card__product {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    margin: 0;
    font-size: 13px;
    color: var(--lsd-slate);
}

.lsdr-feed .lsdr-card__product-stars {
    color: var(--lsd-gold);
    letter-spacing: 2px;
    font-size: 14px;
    line-height: 1;
}

.lsdr-feed .lsdr-card__footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--lsd-mist);
    font-size: 12px;
    color: var(--lsd-quiet);
}

.lsdr-feed .lsdr-card__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #E3166F22, #1EB8DA33);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    color: var(--lsd-magenta);
    flex-shrink: 0;
    line-height: 1;
}

.lsdr-feed .lsdr-card__person {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.lsdr-feed .lsdr-card__author {
    font-weight: 600;
    color: var(--lsd-slate);
    font-size: 13px;
}

.lsdr-feed .lsdr-card__meta {
    /* iOS Safari fix copied 1:1 from Country-Gate .lsdg-globe__option:
       block-level flex (NOT inline-flex) breaks the shared inline run
       cleanly so the flag glyph has its own formatting context and
       does not leak text-rendering state onto the sibling text. */
    display: flex;
    align-items: center;
    gap: 6px;
    color: #6b7785 !important;
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 1px;
}

.lsdr-feed .lsdr-card__meta * {
    color: inherit !important;
}

.lsdr-card__when {
    color: #6b7785 !important;
    -webkit-text-fill-color: #6b7785 !important;
}
.lsdr-card__when:hover,
.lsdr-card__when:focus,
.lsdr-card__when:visited,
.lsdr-card__when:active {
    color: #6b7785 !important;
    -webkit-text-fill-color: #6b7785 !important;
}

.lsdr-feed .lsdr-card__verified {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(67, 218, 175, 0.12);
    color: #1F8D63;
    font: 600 10.5px/1 'Lato', sans-serif;
    padding: 5px 9px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.lsdr-feed .lsdr-card__verified::before {
    content: "✓";
    font-size: 11px;
    font-weight: 700;
}

/* Translation hint — X.com pattern.
 * Small inline row above the body: icon + "Übersetzt aus X" in muted gray
 * + "Original anzeigen" as a magenta link. Discreet but discoverable. */
.lsdr-feed .lsdr-card__translated {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
    color: var(--lsd-quiet) !important;
    font: 500 12px/1.4 'Lato', sans-serif !important;
    flex-wrap: wrap;
}

.lsdr-feed .lsdr-card__translated-icon {
    flex-shrink: 0;
    color: var(--lsd-hush);
    margin-top: -1px;
}

.lsdr-feed .lsdr-card__translated-label {
    color: var(--lsd-quiet);
}

.lsdr-feed .lsdr-card__toggle {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    color: var(--lsd-magenta);
    font: 500 12px/1.4 'Lato', sans-serif;
    cursor: pointer;
}

.lsdr-feed .lsdr-card__toggle:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Empty state */
.lsdr-feed__empty {
    text-align: center;
    color: var(--lsd-quiet);
    padding: 60px 20px;
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--lsd-card-shadow);
}

/* Distribution-bar rows in the aggregate header double as clickable
   star-filter rows — Tenger 2026-05-02 found a separate chip-bar
   redundant. Hover/active state communicates that the rows are links;
   the bar fill color stays warm gold so the visual "5★ has 78%" cue
   remains primary. */
.lsdr-bar-row--link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 8px;
    border-radius: 8px;
    color: inherit !important;
    text-decoration: none !important;
    transition: background 0.12s ease;
}

.lsdr-bar-row--link:hover {
    background: rgba(42, 53, 64, 0.06);
}

.lsdr-bar-row--link.is-active {
    background: rgba(42, 53, 64, 0.10);
    box-shadow: inset 0 0 0 1px rgba(42, 53, 64, 0.12);
}

.lsdr-bar-row__num {
    min-width: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.lsdr-bar-row__pct {
    min-width: 36px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: #6b7785;
    font-size: 13px;
}

/* Aggregate count link when a filter is active — clickable "× 25 reviews"
   that strips ?lsdr_rating= and resets to all reviews. */
.lsdr-aggregate__reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none !important;
    border-bottom: 1px dotted rgba(42, 53, 64, 0.4);
}

.lsdr-aggregate__reset:hover {
    color: #2a3540;
    border-bottom-color: #2a3540;
}

.lsdr-aggregate__reset-x {
    font-weight: 600;
    color: #2a3540;
}

/* Sort bar — "Sortieren: Neuste | Höchste | Niedrigste".
   !important on color overrides the theme's `a { color: #1a7ac4 }` rule
   that otherwise paints the active option blue. */
.lsdr-sort {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin: 20px 0 24px;
    font: 500 13px/1 'Lato', sans-serif;
}

.lsdr-sort__label {
    color: #6b7785;
}

.lsdr-sort__option {
    color: #6b7785 !important;
    text-decoration: none !important;
    padding: 4px 0;
    border-bottom: 1px solid transparent;
    transition: color 0.12s ease, border-color 0.12s ease;
}

.lsdr-sort__option:hover {
    color: #2a3540 !important;
}

.lsdr-sort__option.is-active {
    color: #2a3540 !important;
    border-bottom-color: #2a3540;
    font-weight: 600;
}

/* Mobile: stack the sort options into a label-line + chips below.
   Tenger 2026-05-03: "Sortieren: Neuste zuerst | Höchste Bewertung |
   Niedrigste Bewertung" was a single-line wall on iPhone. */
@media (max-width: 600px) {
    .lsdr-sort {
        gap: 8px 12px;
        margin: 16px 0 20px;
    }
    .lsdr-sort__label {
        flex-basis: 100%;
        margin-bottom: 2px;
    }
}

/* "Mehr anzeigen" Load-More button — replaces numeric pagination.
   Single GET-link to the next ?lsdr_page= page; the filter chip param
   is preserved by remove_query_arg('lsdr_page') in static_pagination(). */
.lsdr-feed__more {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.lsdr-feed__more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 36px;
    border-radius: 999px;
    border: 1px solid #2a3540;
    background: #fff;
    color: #2a3540 !important;
    font: 600 14px/1 'Lato', sans-serif;
    text-decoration: none !important;
    transition: background 0.15s, color 0.15s;
}

.lsdr-feed__more-btn:hover {
    background: #2a3540;
    color: #fff !important;
}

/* PDP feed variant — drop the marketing header padding so the carousel
   replacement sits flush against the price/buy box above it. */
.lsdr-feed--pdp {
    margin-top: 24px;
}

.lsdr-feed--pdp .lsdr-aggregate {
    margin-top: 0;
}

/* Mobile */
@media (max-width: 900px) {
    .lsdr-feed__list { grid-template-columns: repeat(2, 1fr); }

    .lsdr-feed .lsdr-aggregate {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 22px 24px;
        text-align: center;
    }

    .lsdr-feed .lsdr-aggregate__bars {
        min-width: 0;
        justify-self: stretch;
    }

    .lsdr-feed h2.lsdr-feed__title,
    .lsdr-feed .lsdr-feed__title {
        font-size: 32px !important;
    }
}

@media (max-width: 580px) {
    .lsdr-feed { margin: 36px auto 56px; padding: 0 16px; }
    .lsdr-feed__list { grid-template-columns: 1fr; }
}

/* Mobile reveal pattern — Tenger 2026-05-04 "Desktop 9, Mobile 6 sonst zu
 * viel". The server always renders 9 cards initially. On mobile we hide
 * positions 7-9 with a single CSS rule until JS toggles the
 * `.lsdr-feed--mobile-revealed` class on the section (= first click on
 * "Mehr anzeigen"). After that, the CSS rule no longer matches; subsequent
 * "Mehr anzeigen" clicks load 6 more cards via AJAX (load-more.js sets
 * lsdr_per=6 in the URL). All appended cards are visible because the
 * reveal class stays on the section.
 *
 * Use `:nth-child` instead of `:nth-of-type` — the feed list is structured
 * with `<article>` siblings today, but a future template injection may
 * sneak in a `<div>` or `<noscript>` that would silently break the count.
 * `!important` is a deliberate safety guard since the cards inherit
 * `display: flex` from `.lsdr-feed .lsdr-card` (lower specificity but on
 * iOS Safari + a heavy CSS pipeline we hit a layout-flush race where the
 * inherited flex won out before media queries re-cascaded). */
@media (max-width: 768px) {
    .lsdr-feed:not(.lsdr-feed--mobile-revealed) .lsdr-feed__list > .lsdr-card:nth-child(n+7) {
        display: none !important;
    }
}

/* No-session / all-reviewed fallback. Tenger 2026-04-30: looked thin
 * sitting alone on the page with a tall footer-gap behind it. Match the
 * form-card visuals (white surface, cool-blue shadow, 16px radius) and
 * give the host page enough min-height so the footer stays at the
 * bottom even when this is the only content on the page. */
.lsdr-no-session {
    max-width: 680px;
    min-height: 280px;
    margin: 64px auto;
    padding: 48px 56px;
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: rgba(39, 92, 141, 0.1) 10px 10px 50px 3px;
    color: #3F3F3F;
    font: 500 15px/1.55 'Lato', system-ui, sans-serif;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.lsdr-no-session p {
    margin: 0;
    max-width: 480px;
}
.lsdr-no-session::before {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    margin: 0 auto 24px;
    border-radius: 2px;
    background: var(--lsd-gradient-brand, linear-gradient(90deg, #E3166F, #5368E2));
}
@media (max-width: 600px) {
    .lsdr-no-session {
        margin: 32px 16px;
        padding: 36px 24px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .lsdr-form {
        margin: 16px;
        padding: 36px 24px 28px;
        border-radius: 14px;
    }

    .lsdr-form h1.lsdr-form__title {
        font-size: 22px !important;
    }

    .lsdr-rating {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 18px 0;
    }

    .lsdr-rating > div[role="radiogroup"] {
        grid-column: 1;
    }

    .lsdr-rating__star {
        font-size: 28px;
    }

    .lsdr-form .lsdr-form__product {
        grid-template-columns: 48px 1fr;
        gap: 12px;
        padding: 16px 0;
    }

    .lsdr-form .lsdr-form__product-img {
        width: 48px;
        height: 48px;
    }

    .lsdr-form .lsdr-form__product .lsdr-rating {
        grid-column: 1 / -1;
        padding-left: 60px;
        margin-top: 4px;
    }
}

/* ============================================================
   Compact star indicator — PDP above title, shop loop above
   product card title, etc. Tenger spec 2026-04-30.
   ============================================================ */

.lsdr-stars-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    padding: 4px 0;
    /* !important: theme link color (#1a7ac4 blue) was bleeding through
       `color: inherit` on PDP stars and on /reviews/ card date-meta —
       Tenger 2026-05-03 saw blue/red/random link colors on cards. */
    color: #2a3540 !important;
    text-decoration: none !important;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.lsdr-stars-trigger .lsdr-inline-stars__num,
.lsdr-stars-trigger .lsdr-inline-stars__count {
    color: inherit !important;
}

/* PDP variant — Tenger feedback 2026-05-02: stars over the product title
   were oversized in the original Hello-Elementor rating widget. Match
   that visual weight so the swap reads as a 1:1 replacement.
   Tenger 2026-05-03: trim top padding so they sit close to the product
   image; force product title left-aligned (Elementor template defaults
   it to centre on mobile which looks off). */
body.single-product .lsdr-stars-trigger {
    gap: 12px;
    font-size: 16px;
    margin-top: 0 !important;
    margin-bottom: 8px;
    padding-top: 0;
}
body.single-product .lsdr-stars-trigger .lsdr-stars {
    font-size: 22px;
}
body.single-product .lsdr-inline-stars__num {
    font-size: 18px;
}
body.single-product .lsdr-inline-stars__count {
    font-size: 14px;
}

/* Force product title left-align on PDP — Elementor template ships it
   centred; visually the price/buy box below is left-aligned so the title
   should match. */
body.single-product .product_title,
body.single-product h1.elementor-heading-title,
body.single-product .elementor-widget-jet-woo-builder-single-title h1 {
    text-align: left !important;
}

.lsdr-stars-trigger:hover,
.lsdr-stars-trigger:focus {
    opacity: 0.78;
    text-decoration: none;
}

.lsdr-stars-trigger:focus-visible {
    outline: 2px solid #3a5566;
    outline-offset: 2px;
    border-radius: 4px;
}

.lsdr-inline-stars {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
}

.lsdr-inline-stars .lsdr-stars {
    font-size: 16px;
    line-height: 1;
}

.lsdr-inline-stars__num {
    font-weight: 600;
    color: #2a3540;
    font-variant-numeric: tabular-nums;
}

.lsdr-inline-stars__count {
    color: #6b7782;
    font-size: 13px;
}

@media (max-width: 600px) {
    .lsdr-stars-trigger {
        font-size: 13px;
    }
    .lsdr-inline-stars .lsdr-stars {
        font-size: 14px;
    }
}

/* JetWooBuilder shop archive: the thumbnail widget renders its image with
   margin-top: -140px (intentional theme overhang — image floats above the
   card box). Our stars-shortcode is the next sibling in the flex stack and
   visually collides with the bottom of the image. Push stars below the
   image extent so they remain readable, and pull the title up tight against
   the stars (negative margin-bottom) so the trio reads as one block. */
body.woocommerce .elementor-widget-jet-woo-builder-archive-product-thumbnail
    + .elementor-widget-shortcode .lsdr-stars-trigger,
body.archive .elementor-widget-jet-woo-builder-archive-product-thumbnail
    + .elementor-widget-shortcode .lsdr-stars-trigger {
    margin-top: 36px;
}

/* Mobile: image overhang is smaller because the card itself shrinks,
   so 36px reads as a big gap. Trim to 16px. Tenger 2026-05-03. */
@media (max-width: 600px) {
    body.woocommerce .elementor-widget-jet-woo-builder-archive-product-thumbnail
        + .elementor-widget-shortcode .lsdr-stars-trigger,
    body.archive .elementor-widget-jet-woo-builder-archive-product-thumbnail
        + .elementor-widget-shortcode .lsdr-stars-trigger {
        margin-top: 16px;
    }
}

/* Pull the JetWooBuilder title widget tight against the stars by trimming
   its built-in padding-top (Elementor element-style, hence !important to win
   over the inline `--padding` custom-property) + h4 margin-top — only when
   our compact-stars shortcode is the immediately preceding sibling. */
.elementor-widget-shortcode:has(.lsdr-stars-trigger--compact)
    + .elementor-widget-jet-woo-builder-archive-product-title
    > .elementor-widget-container {
    padding-top: 6px !important;
}
.elementor-widget-shortcode:has(.lsdr-stars-trigger--compact)
    + .elementor-widget-jet-woo-builder-archive-product-title h4 {
    margin-top: 0;
}

/* Compact stars (Nord-style) — used in shop loop / category archives.
   Stars only + count in parentheses. No avg number, no "reviews" word.
   Star colour stays the WooCommerce-default gold so cards keep the warm
   colour pop the customer-portrait benefits from. */
.lsdr-stars-trigger--compact {
    margin: 0;
    padding: 0;
    gap: 6px;
}

.lsdr-inline-stars--compact {
    gap: 6px;
}

.lsdr-inline-stars--compact .lsdr-stars {
    font-size: 18px;
}

.lsdr-inline-stars--compact .lsdr-inline-stars__count {
    color: #2a3540;
    font-size: 14px;
    font-weight: 500;
}

@media (max-width: 600px) {
    body.woocommerce .elementor-widget-jet-woo-builder-archive-product-thumbnail
        + .elementor-widget-shortcode .lsdr-stars-trigger,
    body.archive .elementor-widget-jet-woo-builder-archive-product-thumbnail
        + .elementor-widget-shortcode .lsdr-stars-trigger {
        margin-top: 22px;
        margin-bottom: -18px;
    }
    .lsdr-inline-stars--compact .lsdr-stars {
        font-size: 16px;
    }
    .lsdr-inline-stars--compact .lsdr-inline-stars__count {
        font-size: 13px;
    }
}

/* Shop-loop card variant — more compact, no margin-bottom because
   the card title sits directly below */
.lsdr-loop-stars {
    margin: 0 0 4px;
    line-height: 1;
}
.lsdr-loop-stars .lsdr-inline-stars {
    gap: 6px;
}
.lsdr-loop-stars .lsdr-stars {
    font-size: 13px;
}
.lsdr-loop-stars .lsdr-inline-stars__num {
    font-size: 12px;
}
.lsdr-loop-stars .lsdr-inline-stars__count {
    font-size: 11px;
}

/* ============================================================
   Empty state card — used by /reviews/, PDP tab, product feed.
   Tenger spec 2026-04-30 task #88.
   ============================================================ */

.lsdr-empty {
    max-width: 560px;
    margin: 48px auto;
    padding: 56px 40px 48px;
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: rgba(39, 92, 141, 0.08) 8px 8px 36px 0;
    text-align: center;
    color: #2a3540;
}

.lsdr-empty__icon {
    font-size: 48px;
    line-height: 1;
    color: #FFB400;
    margin-bottom: 16px;
    text-shadow: 0 2px 0 rgba(255, 180, 0, 0.18);
}

.lsdr-empty__title {
    font-family: 'Lato', system-ui, -apple-system, sans-serif;
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 12px;
    color: #1a2530;
}

.lsdr-empty__body {
    font-size: 15px;
    line-height: 1.55;
    color: #5b6772;
    margin: 0 0 28px;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

.lsdr-empty__cta {
    display: inline-block;
    padding: 14px 32px;
    background: #3a5566;
    color: #FFFFFF !important;
    text-decoration: none;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.02em;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.lsdr-empty__cta:hover,
.lsdr-empty__cta:focus {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(58, 85, 102, 0.22);
    text-decoration: none;
}

@media (max-width: 600px) {
    .lsdr-empty {
        margin: 32px 16px;
        padding: 40px 24px 32px;
    }
    .lsdr-empty__title { font-size: 20px; }
}

/* ============================================================
   Landing-page carousel — replaces Trustindex.
   Scroll-snap-x, no JS dependency. Task #82.
   ============================================================ */

.lsdr-carousel,
.lsdr-feed.lsdr-carousel {
    /* Match the /reviews/ page exactly: 1200px container, no inner
       horizontal padding, so aggregate-header and cards line up to
       the same column. Tenger 2026-04-30 round 4: top margin tightened
       further (was 28px, still too far from the "Testimonials" heading
       above). */
    max-width: 1200px;
    width: auto;
    margin: 12px auto 56px;
    padding: 0;
    color: #222;
    position: relative;
}

/* Aggregate header sits inset by the same 12px the carousel-track is
   inset (so card-shadows have room to land). That keeps both the
   aggregate's left/right edges and the card-row's left/right edges
   on the exact same vertical guides. */
.lsdr-feed.lsdr-carousel > .lsdr-aggregate {
    max-width: none;
    margin: 0 12px;
}

/* "Alle Bewertungen ansehen" — sits between aggregate and track,
   right-aligned, with a chevron so it reads as a clickable link
   (Tenger feedback: bottom placement looked dead, top reads as CTA). */
.lsdr-carousel__toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 16px 0 8px;
}

.lsdr-carousel__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #3a5566;
    text-decoration: none;
    padding: 4px 0;
    border-bottom: 1px solid currentColor;
    transition: color 0.15s ease, gap 0.2s ease;
}
.lsdr-carousel__more:hover,
.lsdr-carousel__more:focus {
    color: #E3166F;
    gap: 10px;
    text-decoration: none;
}

/* Viewport hosts the track + arrows. The track is full-width inside
   so the cards line up exactly with the aggregate header above. */
.lsdr-carousel__viewport {
    position: relative;
}

.lsdr-carousel__track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 12px;
    -webkit-overflow-scrolling: touch;
    /* Padding gives the cool-blue card shadow room to land — without
       it the first card's left-shadow + every card's top/bottom
       shadow gets clipped by overflow-x. Tenger 2026-04-30 round 4:
       extra bottom padding so the shadow's fade-to-white transition
       reads as deliberate breathing room instead of an abrupt cut. */
    padding: 28px 12px 64px;
    scrollbar-width: none;
}
.lsdr-carousel__track::-webkit-scrollbar { display: none; }

.lsdr-carousel__slide {
    flex: 0 0 auto;
    width: 360px;
    scroll-snap-align: start;
}

.lsdr-carousel__slide .lsdr-card {
    height: 100%;
    margin: 0;
}

/* Circular white arrows that overhang the viewport edges. They live
   above the section (z-index) but don't steal width from the track. */
.lsdr-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* All dimension/box props !important: theme button styles (16px L/R padding,
       8px T/B padding, magenta border, 3px radius, magenta foreground) leak in
       on PDP and on /reviews/ — without these the circle becomes a stretched
       ellipse and the SVG drifts off-centre. */
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #FFFFFF !important;
    color: #2a3540 !important;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(39, 92, 141, 0.18),
                0 1px 3px rgba(0, 0, 0, 0.06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    z-index: 3;
}

.lsdr-carousel__arrow[hidden] {
    display: none !important;
}

/* Hover: subtle lift + stronger shadow, NO color tint on the arrow.
   Tenger feedback: the magenta-on-hover read as the whole button
   filling pink. Keep arrow stroke dark, just bump the elevation. */
.lsdr-carousel__arrow:hover,
.lsdr-carousel__arrow:focus {
    transform: translateY(-50%) scale(1.06);
    box-shadow: 0 8px 26px rgba(39, 92, 141, 0.26),
                0 1px 3px rgba(0, 0, 0, 0.08);
    color: #2a3540 !important;
    background: #FFFFFF !important;
    border: 0 !important;
}

.lsdr-carousel__arrow:focus-visible {
    outline: 2px solid #E3166F;
    outline-offset: 2px;
}

.lsdr-carousel__arrow--prev { left: -22px; }
.lsdr-carousel__arrow--next { right: -22px; }

@media (max-width: 720px) {
    /* Tenger 2026-05-03 mobile test: cards should bleed to the screen edges.
       The Elementor container around the shortcode has padding: 10px L/R
       (theme setting we can't change), so we counter it with a negative
       margin so the carousel section spans the full viewport. Aggregate
       header sits inset by its own margin so it stays comfortably indented. */
    .lsdr-feed.lsdr-carousel {
        padding: 0;
        margin-top: 20px;
        margin-left: -10px;
        margin-right: -10px;
    }
    .lsdr-feed.lsdr-carousel > .lsdr-aggregate { margin: 0 22px; }
    .lsdr-carousel__toolbar { padding: 0 26px; }
    /* 10px L/R inset on the track so the card's left shadow has room to
       land instead of clipping at the viewport edge. Tenger 2026-05-03:
       "es soll quasi der Container sein, dann die Card und die Card selbst
       hat 10 Pixel links Abstand, sodass man den Shadow nicht abgeschnitten
       sieht". */
    .lsdr-carousel__track {
        padding: 20px 10px 56px;
        gap: 12px;
        scroll-padding-left: 10px;
    }
    .lsdr-carousel__slide { width: calc(100vw - 60px); max-width: 360px; }
    .lsdr-carousel__arrow { width: 36px; height: 36px; }
    .lsdr-carousel__arrow--prev { left: 0; }
    .lsdr-carousel__arrow--next { right: 0; }
}

/* ============================================================
   Form-page polish phase 2: Lato font + button-lsd-style submit.
   Task #87. Page-background-Hack entfernt, weil die echte Site
   keinen Whisper-Stone-bg verwendet (DESIGN.md war ein AI-Wunsch-
   Spec, das mit der echten Brand-Realität nicht übereinstimmte).
   ============================================================ */

.lsdr-form,
.lsdr-no-session,
.lsdr-empty,
.lsdr-feed__title,
.lsdr-form__title,
.lsdr-empty__title,
.lsdr-carousel__title {
    font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.lsdr-form__submit,
button.lsdr-form__submit,
input[type="submit"].lsdr-form__submit {
    position: relative;
    display: inline-block;
    padding: 16px 40px;
    background: #FFFFFF;
    color: #1a2530;
    border: 0;
    border-radius: 999px;
    font-family: 'Lato', system-ui, -apple-system, sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 0 0 2px transparent,
                0 8px 28px rgba(227, 22, 111, 0.22);
    background-image: linear-gradient(#FFFFFF, #FFFFFF),
                      linear-gradient(120deg, #E3166F 0%, #FFB400 50%, #3a5566 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border: 2px solid transparent;
    transition: transform 0.18s ease, box-shadow 0.25s ease;
}

.lsdr-form__submit:hover,
.lsdr-form__submit:focus {
    transform: translateY(-1px);
    box-shadow: 0 12px 36px rgba(227, 22, 111, 0.32),
                0 0 0 4px rgba(255, 180, 0, 0.12);
}

.lsdr-form__submit:active {
    transform: translateY(0);
}

.lsdr-form__submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ============================================================
   "Mehr anzeigen" / Show more for long review bodies.
   Tenger spec 2026-05-01: cards in carousel + feed shouldn't run
   to absurd heights. Truncate at 6 lines, JS detects overflow and
   reveals the expand button only when needed.
   ============================================================ */

/* wpautop wraps every paragraph in <p> with top+bottom margins, which
   inflates scrollHeight inside [data-lsdr-clamp] and tricks the
   binary-search truncator into clipping at 1-2 words. Reset margins
   on the first/last <p> and tighten spacing between paragraphs so
   the content height matches lineHeight × visibleLines exactly. */
[data-lsdr-clamp] > p {
    margin-top: 0;
    margin-bottom: 0;
}
[data-lsdr-clamp] > p + p {
    margin-top: 0.6em;
}

/* Twitter-style "Show more" — the JS truncation in cards.js inserts
   an inline <a> right after the last visible word. Style matches the
   "Show original" toggle (magenta, small, no decoration until hover)
   so the two read as the same kind of action. <a> instead of <button>
   sidesteps theme button hover/focus styles entirely. */
.lsdr-card__expand,
.lsdr-card__expand:link,
.lsdr-card__expand:visited {
    color: var(--lsd-magenta, #E3166F);
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    margin-left: 4px;
}

.lsdr-card__expand:hover,
.lsdr-card__expand:focus {
    color: var(--lsd-magenta, #E3166F);
    text-decoration: underline;
    text-underline-offset: 2px;
    outline: none;
}

/* ---------------------------------------------------------------------------
   PDP empty-stars container collapse
   ---------------------------------------------------------------------------
   When [lsd_reviews_stars] has nothing to render (no TRID or 0 reviews) it
   emits <span class="lsdr-stars-empty" hidden> as a marker. Without that, the
   Elementor wrapper container above the product title still contributes its
   `margin-bottom`, leaving a ~9px gap (Tenger 2026-05-05 on
   /shop/100mcg-1p-lsd-full-blotter/). `:only-child` guards against breaking
   layouts where Tenger later puts additional widgets in the same container.
   --------------------------------------------------------------------------- */
.elementor-element:has(
    > .elementor-widget-shortcode:only-child
    > .elementor-widget-container
    > .elementor-shortcode
    > .lsdr-stars-empty
) {
    display: none;
}