/* Worn Out Vegan reviews widget. Self-contained; themeable via CSS variables
   set on #wov-reviews from the theme if desired. */

#wov-reviews {
    --wov-rev-star: #ffc107;
    --wov-rev-star-empty: #d8d8d8;
    --wov-rev-accent: #111;
    --wov-rev-accent-text: #fff;
    --wov-rev-border: #e6e6e6;
    --wov-rev-muted: #777;
    --wov-rev-radius: 12px;

    font-family: inherit;
    /* Anchor type to the root, not the inherited body size, so sizes are
       predictable. The Glozin root is 62.5% (1rem = 10px), so 1.4rem = 14px. */
    font-size: 1.4rem;
    line-height: 1.55;
    color: inherit;
    margin: 2rem 0;
}

/* Fill the theme width wrapper (.container / .fluid_container / .stretch_width)
   this is mounted in — that wrapper owns the page width, so don't re-cap it here
   (a fixed cap kept the widget narrow even on "Wide"/"Full" sections). */
.wov-rev__inner {
    width: 100%;
}

/* ----- stars ----------------------------------------------------------- */

.wov-rev-star-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.wov-rev-stars {
    position: relative;
    display: inline-block;
    line-height: 0;
    font-size: 1.35em;
    white-space: nowrap;
}

/* Loox-style star glyph (sprite <use>); sized by the parent's font-size */
.wov-rev-star-ico {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: top;
    fill: currentColor;
}

/* Small gap between stars, like Loox; identical on bg + fg so the fill stays aligned */
.wov-rev-stars .wov-rev-star-ico:not(:last-child) {
    margin-right: .12em;
}

.wov-rev-stars__bg {
    color: var(--wov-rev-star-empty);
}

.wov-rev-stars__fg {
    position: absolute;
    inset: 0 auto 0 0;
    overflow: hidden;
    white-space: nowrap;
    color: var(--wov-rev-star);
}

/* ----- summary --------------------------------------------------------- */

.wov-rev__summary {
    padding: 10px 0;
}

/* Stars, count and sort share one line — also on mobile */
.wov-rev__bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* Sort control + "Write a review" CTA, grouped on the right of the bar */
.wov-rev__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
}

.wov-rev__score {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.wov-rev__count {
    color: #111;
    font-size: 1.4rem;
    white-space: nowrap;
    padding-top: 3px;
}

.wov-rev__sort {
    border: 1px solid var(--wov-rev-border);
    border-radius: 8px;
    background: #fff;
    color: #111;
    font: inherit;
    font-size: 1.3rem;
    line-height: 1.2;
    padding: 12px 25px;
    max-width: 100%;
    height: auto;
}

/* Chevron sits at the end of the score row; the whole row is the toggle */
.wov-rev__chev {
    display: inline-block;
    color: var(--wov-rev-muted);
    transition: transform .15s ease;
    position: relative;
    top: 1px;
    right: 5px;
    font-size: 1.5em;

}

.wov-rev__score[aria-expanded="false"] .wov-rev__chev {
    transform: rotate(-90deg);
}

.wov-rev__hist {
    display: grid;
    gap: .25rem;
    max-width: 380px;
    margin-top: 10px;
    margin-bottom: 1.6rem;
}

/* [hidden] alone loses to the class' display:grid — restore the collapse */
.wov-rev__hist[hidden] {
    display: none;
}

/* Average + happy-customer line shown above the bars when the breakdown opens */
.wov-rev__hist-summary {
    margin-bottom: .6rem;
}

.wov-rev__hist-avg {
    font-size: 1.9rem;
    font-weight: 700;
    color: #111;
}

.wov-rev__hist-avg span {
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--wov-rev-muted);
}

.wov-rev__hist-happy {
    display: block;
    margin-top: .2rem;
    font-size: 1.3rem;
    color: var(--wov-rev-muted);
}

.wov-rev__hist-row {
    display: grid;
    grid-template-columns: 2.6em 1fr 2.5em;
    align-items: center;
    gap: .6rem;
    font-size: 1.3rem;
}

/* tabular-nums keeps every digit the same width so 1/2/3/4/5 align identically */
.wov-rev__hist-label {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.wov-rev__hist-star {
    width: .9em;
    height: .9em;
    vertical-align: -.12em;
    margin-left: .35em;
    color: var(--wov-rev-star);
}

.wov-rev__hist-bar {
    height: 8px;
    border-radius: 4px;
    background: #f0f0f0;
    overflow: hidden;
}

.wov-rev__hist-bar span {
    display: block;
    height: 100%;
    background: var(--wov-rev-star);
    border-radius: 4px;
}

.wov-rev__hist-count {
    text-align: right;
    color: var(--wov-rev-muted);
}

/* ----- buttons --------------------------------------------------------- */

.wov-rev__btn {
    display: inline-block;
    padding: .7rem 1.4rem;
    border: 1px solid var(--wov-rev-accent);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}

.wov-rev__btn--primary {
    background: var(--wov-rev-accent);
    color: var(--wov-rev-accent-text);
}

.wov-rev__btn--small {
    padding: .45rem .9rem;
    font-size: 1.3rem;
}

/* "Write a review" CTA — light-grey outline + subtle radius matching the sort control & cards */
.wov-rev__btn--write {
    border: 1px solid var(--wov-rev-border);
    border-radius: 8px;
    background: #fff;
    color: #111;
    padding: 12px 25px;
    font-size: 1.3rem;
    line-height: 1.2;
    white-space: nowrap;
}

/* Two copies of the CTA: inline beside the sort on desktop, full-width under the carousel on mobile (toggled by the 640px query) */
.wov-rev__write-mobile {
    display: none;
}

.wov-rev__btn:disabled {
    opacity: .55;
    cursor: wait;
}

/* ----- photo carousel (customer photos) -------------------------------- */

/* Positioning context for the round scroll arrows that overlay the strip. */
.wov-rev__carousel-wrap {
    position: relative;
    margin: 12px 0 4px;
}

.wov-rev__carousel {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Arrows replace the scrollbar; still drag/swipe-scrollable. */
    scrollbar-width: none;
}

.wov-rev__carousel::-webkit-scrollbar {
    display: none;
}

/* Round arrows at the strip's edges (mirrors the lightbox nav). JS hides each
   one at the matching end and hides both when nothing overflows. */
.wov-rev__carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    color: #111;
    font-size: 2.2rem;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}

.wov-rev__carousel-arrow:hover {
    background: #fff;
}

.wov-rev__carousel-arrow[hidden] {
    display: none;
}

.wov-rev__carousel-arrow--prev {
    left: 6px;
}

.wov-rev__carousel-arrow--next {
    right: 6px;
}

.wov-rev__carousel-item {
    flex: 0 0 auto;
    /* Big tiles; on mobile this lands ~2.2 across so the next one peeks in
       (a hint there's more to scroll), and caps so desktop tiles aren't huge. */
    width: clamp(145px, 41vw, 190px);
    aspect-ratio: 4 / 5;
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    padding: 0;
    cursor: zoom-in;
    background: #f4f4f4;
    scroll-snap-align: start;
}

.wov-rev__carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ----- review list (A/B tested: list beats mosaic) --------------------- */

.wov-rev__empty {
    text-align: center;
    color: var(--wov-rev-muted);
    padding: 2rem 0;
}

.wov-rev__grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wov-rev-card {
    border: 1px solid var(--wov-rev-border);
    border-radius: var(--wov-rev-radius);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

/* Which product is being reviewed — link + mockup thumbnail.
   No divider: the card's gap is enough separation before the stars row. */
.wov-rev-card__product {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    font-size: 1.3rem;
    min-width: 0;
}

.wov-rev-card__product img {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    background: #f4f4f4;
}

.wov-rev-card__product-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wov-rev-card__product:hover .wov-rev-card__product-name {
    text-decoration: underline;
}

.wov-rev-card__media {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.wov-rev-card__thumb {
    position: relative;
    width: 84px;
    height: 84px;
    border: 0;
    border-radius: 8px;
    overflow: hidden;
    padding: 0;
    cursor: zoom-in;
    background: #f4f4f4;
}

.wov-rev-card__thumb img,
.wov-rev-card__thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wov-rev-card__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.4rem;
    background: rgba(0, 0, 0, .25);
}

.wov-rev-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.wov-rev-card__date {
    color: var(--wov-rev-muted);
    font-size: 1.2rem;
}

.wov-rev-card__author {
    font-weight: 600;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

/* Reviewer's shipping country, shown as just the flag before the name. */
.wov-rev-flag {
    font-size: 1.5rem;
    line-height: 1;
}

.wov-rev-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: #444;
    white-space: nowrap;
}

.wov-rev-badge__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25em;
    height: 1.25em;
    border-radius: 50%;
    background: #111;
    color: #fff;
    font-size: .8em;
    line-height: 1;
    flex-shrink: 0;
}

.wov-rev-card__title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.wov-rev-card__body {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.55;
    white-space: pre-line;
}

.wov-rev-card__product {
    font-size: 1.3rem;
    color: #111;
    text-decoration: none;
}

.wov-rev-card__reply {
    border-left: 3px solid var(--wov-rev-border);
    padding: .8rem 1rem .8rem 1.1rem;
    margin-top: .4rem;
    font-size: 1.35rem;
    background: #fafafa;
    border-radius: 0 8px 8px 0;
}

.wov-rev-card__reply-author {
    font-weight: 700;
    display: block;
    margin-bottom: .4rem;
}

.wov-rev-card__reply p {
    margin: 0;
}

.wov-rev__more {
    text-align: center;
    margin-top: 1.5rem;
}

/* ----- modal ----------------------------------------------------------- */

.wov-rev-no-scroll {
    overflow: hidden;
}

.wov-rev-modal,
.wov-rev-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
}

/* [hidden] alone loses to the desktop display:flex on .wov-rev-lightbox below —
   without this the lightbox shows (empty) on load and the close button can't
   collapse it. Keep both overlays hidden when inactive. */
.wov-rev-modal[hidden],
.wov-rev-lightbox[hidden] {
    display: none;
}

.wov-rev-modal__backdrop,
.wov-rev-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
}

/* Full-screen write-review modal */
.wov-rev-modal__panel {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    background: #fff;
    color: #111;
    display: flex;
    padding: clamp(2.5rem, 7vw, 5rem) 1.5rem;
}

/* Keep the wizard readable on wide screens; margin:auto centres it both ways
   and (unlike justify-content) stays scrollable when taller than the viewport */
.wov-rev-form,
.wov-rev-thanks {
    width: 100%;
    max-width: 640px;
    margin: auto;
}

.wov-rev-modal__close,
.wov-rev-lightbox__close {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    border: 0;
    background: transparent;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    z-index: 3;
}

/* ----- form ------------------------------------------------------------ */

/* Constant height keeps the progress dots (pinned to the top) and the step's
   nav buttons (pinned to the bottom) from jumping between steps as the content
   height changes. Tall enough for the longest step; the panel scrolls if a
   short viewport can't fit it. */
.wov-rev-form {
    display: flex;
    flex-direction: column;
    gap: 2.2rem;
    min-height: 44rem;
}

.wov-rev-form__title {
    margin: 0;
    font-size: 1.9rem;
}

.wov-rev-form__subtitle {
    margin: -.9rem 0 0;
    color: var(--wov-rev-muted);
    font-size: 1.5rem;
    line-height: 1.5;
}

/* ----- multi-step wizard ----------------------------------------------- */

.wov-rev-form__progress {
    display: flex;
    flex: 0 0 auto;
    gap: .5rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.wov-rev-form__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--wov-rev-border);
    transition: background .15s ease;
}

.wov-rev-form__dot.is-active {
    background: #111;
}

/* The active step fills the space between the dots and the nav; its content
   sits centred so short steps don't leave the whole gap below the content. */
.wov-rev-form__step {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 1.6rem;
}

.wov-rev-form__step > .wov-rev-form__title {
    margin-top: auto;
}

/* [hidden] alone loses to the class' display:flex — keep inactive steps hidden */
.wov-rev-form__step[hidden] {
    display: none;
}

.wov-rev-form__step[data-wov-step="1"] .wov-rev-form__stars {
    justify-content: center;
}

/* margin-top:auto pins the buttons to the bottom of the fixed-height step */
.wov-rev-form__nav {
    display: flex;
    gap: .8rem;
    margin-top: auto;
}

.wov-rev-form__nav .wov-rev__btn {
    flex: 1;
    padding: 1.05rem 1.6rem;
    font-size: 1.5rem;
}

.wov-rev-form__skip {
    background: none;
    border: 0;
    color: var(--wov-rev-muted);
    font: inherit;
    font-size: .85em;
    text-decoration: underline;
    cursor: pointer;
    padding: .4rem;
    align-self: center;
}

.wov-rev-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.wov-rev-form__field {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.wov-rev-form__label {
    font-weight: 600;
    font-size: 1.4rem;
}

.wov-rev-form__perk {
    font-weight: 400;
    color: #157347;
}

.wov-rev-form__hint {
    color: var(--wov-rev-muted);
    font-size: .85em;
}

.wov-rev-form__input {
    border: 1px solid var(--wov-rev-border);
    border-radius: 8px;
    padding: .95rem 1.1rem;
    font: inherit;
    font-size: 1.6rem;
    width: 100%;
    background: #fff;
    color: #111;
}

.wov-rev-form__stars {
    display: flex;
    gap: .4rem;
}

.wov-rev-form__stars button {
    border: 0;
    background: transparent;
    font-size: 3rem;
    line-height: 1;
    color: var(--wov-rev-star-empty);
    cursor: pointer;
    padding: 0 .2rem;
}

.wov-rev-form__stars button.is-active {
    color: var(--wov-rev-star);
}

.wov-rev-form__media-buttons {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}

.wov-rev-form__previews {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.wov-rev-form__preview {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--wov-rev-border);
}

.wov-rev-form__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wov-rev-form__preview--video {
    width: auto;
    max-width: 100%;
    height: auto;
    padding: .45rem 2rem .45rem .6rem;
    font-size: .8em;
    display: inline-flex;
    align-items: center;
}

.wov-rev-form__preview button {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .65);
    color: #fff;
    font-size: .85rem;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.wov-rev-form__upload-status {
    font-size: .85em;
    color: var(--wov-rev-muted);
}

.wov-rev-form__upload-status.is-error {
    color: #c0392b;
}

.wov-rev-form__error {
    color: #c0392b;
    font-size: .88em;
    margin: 0;
}

/* Honeypot: visually gone, still in the DOM for bots */
.wov-rev-form__website {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ----- thank-you ------------------------------------------------------- */

.wov-rev-thanks {
    text-align: center;
    padding: 1.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

/* [hidden] alone loses to the flex display above — without these the form and
   the thank-you panel both stay visible (thank-you showed before submitting). */
.wov-rev-form[hidden],
.wov-rev-thanks[hidden] {
    display: none;
}

.wov-rev-thanks h3 {
    font-size: 1.8rem;
    margin: 0;
}

.wov-rev-thanks p {
    font-size: 1.4rem;
}

.wov-rev-thanks__icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #e8f6ef;
    color: #157347;
    display: grid;
    place-items: center;
    font-size: 2rem;
}

/* ----- lightbox (full-screen photo gallery + the review it belongs to) --- */

.wov-rev-lightbox {
    z-index: 10000;
}

/* above the write-review modal */
.wov-rev-lightbox__backdrop {
    background: rgba(0, 0, 0, .9);
}

.wov-rev-lightbox__stage {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    pointer-events: none; /* clicks on empty dark area fall through to the backdrop = close */
}

/* …but the photo, arrows and review panel stay interactive */
.wov-rev-lightbox__media-inner img,
.wov-rev-lightbox__media-inner video,
.wov-rev-lightbox__nav,
.wov-rev-lightbox__info {
    pointer-events: auto;
}

.wov-rev-lightbox__media {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    place-items: center;
    padding: 1.5rem;
}

.wov-rev-lightbox__media-inner {
    /* Fill the (deterministically sized) media box rather than shrink-wrapping
       the image — a content-sized box makes the img's max-width:100% resolve
       against 0 before load, so it paints nothing until a re-render. */
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}

.wov-rev-lightbox__media-inner img,
.wov-rev-lightbox__media-inner video {
    /* Fill the fixed box and letterbox via object-fit, so the image shows the
       moment it loads and the pop-up never resizes around it. */
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.wov-rev-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #111;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}

.wov-rev-lightbox__nav--prev {
    left: 1rem;
}

.wov-rev-lightbox__nav--next {
    right: 1rem;
}

/* A single photo needs neither arrows nor a counter */
.wov-rev-lightbox.is-single .wov-rev-lightbox__nav,
.wov-rev-lightbox.is-single .wov-rev-lightbox__counter {
    display: none;
}

.wov-rev-lightbox__counter {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: .9em;
    background: rgba(0, 0, 0, .45);
    padding: .2rem .7rem;
    border-radius: 999px;
}

.wov-rev-lightbox__info {
    flex: 0 0 auto;
    background: #fff;
    color: #111;
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
    max-height: 42vh;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.wov-rev-lightbox__head {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.wov-rev-lightbox__body {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.55;
    white-space: pre-line;
}

/* Drop the card divider styling and pin the product link to the bottom */
.wov-rev-lightbox__info .wov-rev-card__product {
    border-bottom: 0;
    padding-bottom: 0;
    margin-top: auto;
}

.wov-rev-lightbox__close {
    color: #fff;
    font-size: 2rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    display: grid;
    place-items: center;
}

@media (min-width: 800px) {
    /* Desktop: a centred pop-up card, not a full-screen takeover. */
    .wov-rev-lightbox {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 4vh 4vw;
    }

    .wov-rev-lightbox__stage {
        position: relative;
        inset: auto;
        flex-direction: row;
        /* Fixed size (not max-) so the card stays one size from the instant it
           opens — the image loads into a reserved box instead of growing it. */
        width: 1000px;
        max-width: 92vw;
        height: 86vh;
        border-radius: 14px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 12px 48px rgba(0, 0, 0, .45);
        pointer-events: auto; /* a solid card — only the backdrop closes it */
    }

    /* Lighter screen dim — the card itself carries the contrast now. */
    .wov-rev-lightbox__backdrop {
        background: rgba(0, 0, 0, .6);
    }

    /* Black behind the photo (white card stays on the review side) so the
       image pops against it instead of washing out on white. */
    .wov-rev-lightbox__media {
        padding: 2rem;
        background: #000;
        min-width: 0;
    }

    .wov-rev-lightbox__info {
        width: 340px;
        max-width: 40%;
        max-height: 86vh;
        padding: 2.5rem 2rem;
        gap: .7rem;
    }
}

/* Mobile lightbox: the photo fills the whole screen (no padding box), and the
   review rides in a bottom scrim overlay lifted off the very edge — toward the
   readable centre and clear of the floating chat bubble in the bottom corner. */
@media (max-width: 799px) {
    .wov-rev-lightbox__media {
        padding: 0;
    }

    .wov-rev-lightbox__info {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 60vh;
        padding: 4rem 1.6rem calc(env(safe-area-inset-bottom, 0px) + 7rem);
        gap: .4rem;
        color: #fff;
        background: linear-gradient(to top, rgba(0, 0, 0, .92) 35%, rgba(0, 0, 0, .55) 75%, rgba(0, 0, 0, 0));
    }

    .wov-rev-lightbox__info .wov-rev-card__author,
    .wov-rev-lightbox__info .wov-rev-card__product,
    .wov-rev-lightbox__body {
        color: #fff;
    }

    .wov-rev-lightbox__info .wov-rev-card__date,
    .wov-rev-lightbox__info .wov-rev-badge {
        color: rgba(255, 255, 255, .8);
    }

    /* Counter would sit under the overlay — move it up, opposite the close button */
    .wov-rev-lightbox__counter {
        top: 1.1rem;
        bottom: auto;
        left: 1.6rem;
        transform: none;
    }

    .wov-rev__sort {
        padding: 10px;
    }
}

/* ----- small screens --------------------------------------------------- */

@media (max-width: 640px) {
    .wov-rev-form__row {
        grid-template-columns: 1fr;
    }

    .wov-rev__count {
        font-size: 1.4rem;
    }

    .wov-rev-stars {
        font-size: 1.15em;
    }

    /* Swap the inline desktop CTA for a full-width one under the carousel */
    .wov-rev__write-desktop {
        display: none;
    }

    .wov-rev__write-mobile {
        display: block;
        margin-top: 10px;
    }

    .wov-rev__write-mobile .wov-rev__btn--write {
        display: block;
        width: 100%;
        padding: .85rem 1.4rem;
        font-size: 1.5rem;
    }
}