/* Flux Reviews — storefront styles (reviews + questions).
   Inherits the theme's font and text colour. Buttons, heading, width and
   fields come from the theme at runtime via --frv-* variables (see
   themeVars() in reviews.js); everything here is the fallback. */

.frv{max-width:var(--frv-width,1100px);margin:56px auto;padding:0 var(--frv-pad-r,20px) 0 var(--frv-pad-l,20px);box-sizing:border-box;font:inherit;color:inherit;--frv-line-c:var(--frv-line,rgba(0,0,0,.1));--frv-muted-c:var(--frv-muted,rgba(0,0,0,.6));--frv-soft:rgba(0,0,0,.035)}
.frv *{box-sizing:border-box}
.frv [hidden]{display:none!important}
/* Lined up with a theme element (mountPosition before/after): its box rules, not ours. */
[data-flux-reviews-aligned] .frv{max-width:none;padding:0;margin:48px 0 64px}
.frv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.frv-muted{color:var(--frv-muted-c)}
.frv-small{font-size:.875em;margin:0}

/* ---- head + tabs ---- */
.frv-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:0 0 20px}
.frv-heading{margin:0;font-family:var(--frv-h-font,inherit);font-weight:var(--frv-h-weight,700);font-size:var(--frv-h-size,1.75em);text-transform:var(--frv-h-transform,none);letter-spacing:var(--frv-h-spacing,normal);line-height:1.2}
.frv-head__product{color:var(--frv-muted-c);font-size:1.05em;line-height:1.3}
.frv-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 24px}
.frv-pill{appearance:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 20px;border-radius:999px;border:1px solid var(--frv-line-c);background:transparent;color:inherit;font:inherit;font-weight:500;cursor:pointer}
.frv-pill span{color:var(--frv-muted-c)}
.frv-pill.is-on{background:var(--frv-btn-bg,var(--frv-accent,#111827));border-color:var(--frv-btn-bg,var(--frv-accent,#111827));color:var(--frv-btn-fg,#fff)}
.frv-pill.is-on span{color:inherit;opacity:.85}

/* ---- buttons ---- */
.frv-btn,.frv-dialog .frv-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 24px;border:1px solid var(--frv-btn-border,var(--frv-btn-bg,var(--frv-accent,#111827)));border-radius:var(--frv-btn-radius,8px);background:var(--frv-btn-bg,var(--frv-accent,#111827));color:var(--frv-btn-fg,#fff);font:inherit;font-family:var(--frv-btn-font,inherit);font-size:var(--frv-btn-size,inherit);font-weight:var(--frv-btn-weight,600);text-transform:var(--frv-btn-transform,none);letter-spacing:var(--frv-btn-spacing,normal);text-decoration:none;cursor:pointer;white-space:nowrap}
.frv-btn:hover{opacity:.9}
.frv-btn:disabled{opacity:.5;cursor:default}
.frv-btn--ghost,.frv-dialog .frv-btn--ghost{background:transparent;color:var(--frv-btn-bg,var(--frv-accent,#111827));border-color:var(--frv-btn-bg,var(--frv-accent,#111827))}

/* ---- CTA banner ---- */
.frv-cta{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;padding:20px 24px;margin:0 0 28px;border-radius:var(--frv-btn-radius,12px);background:var(--frv-soft)}
.frv-cta__text{margin:0;font-size:1.15em;font-weight:500}
.frv-cta__note{margin:4px 0 0;font-size:.875em;color:var(--frv-muted-c)}

/* ---- stars ---- */
.frv-stars{position:relative;display:inline-block;line-height:0;vertical-align:middle;white-space:nowrap}
.frv-stars svg{width:var(--frv-size,16px);height:var(--frv-size,16px);margin-right:2px}
.frv-stars__bg svg{fill:rgba(0,0,0,.14)}
.frv-stars__fg{position:absolute;left:0;top:0;overflow:hidden}
.frv-stars__fg svg{fill:var(--frv-star,#f5a623)}

.frv-summary{display:inline-flex;align-items:center;gap:8px;margin:6px 0 10px;color:inherit;text-decoration:none;font-size:.9em}
.frv-summary:hover .frv-summary__text{text-decoration:underline}
.frv-summary__text{color:var(--frv-muted-c)}

/* ---- photo strip ---- */
.frv-gallery{margin:0 0 28px}
.frv-subhead{margin:0 0 12px;font-weight:600}
.frv-subhead span{color:var(--frv-muted-c);font-weight:400}
.frv-gallery__row{display:flex;gap:10px;overflow-x:auto;scrollbar-width:thin;padding-bottom:4px}
.frv-thumb{appearance:none;flex:none;padding:0;border:0;background:var(--frv-soft);border-radius:10px;overflow:hidden;cursor:zoom-in;line-height:0}
.frv-thumb img{width:96px;height:96px;object-fit:cover;display:block}
.frv-thumb--sm img{width:72px;height:72px}
.frv-thumb:focus-visible{outline:2px solid var(--frv-btn-bg,#111827);outline-offset:2px}

/* ---- score card ---- */
.frv-overview{display:grid;grid-template-columns:minmax(180px,260px) 1fr;gap:24px 48px;align-items:center;padding:28px 32px;margin:0 0 20px;border:1px solid var(--frv-line-c);border-radius:var(--frv-btn-radius,12px)}
.frv-overview__score{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.frv-overview__score strong{font-size:3em;line-height:1}
.frv-overview__score>div>span{color:var(--frv-muted-c)}
.frv-overview__bars{display:flex;flex-direction:column;gap:4px;max-width:560px}
.frv-bar{appearance:none;display:grid;grid-template-columns:auto 1fr 36px;gap:14px;align-items:center;padding:4px 6px;border:0;border-radius:6px;background:transparent;color:inherit;font:inherit;cursor:pointer;text-align:left}
.frv-bar:hover:not(:disabled),.frv-bar.is-on{background:var(--frv-soft)}
.frv-bar:disabled{cursor:default;opacity:.55}
.frv-bar .frv-stars{justify-self:end}
.frv-bar__track{height:8px;border-radius:999px;background:rgba(0,0,0,.08);overflow:hidden}
.frv-bar__track span{display:block;height:100%;background:var(--frv-star,#f5a623);border-radius:inherit}
.frv-bar__n{color:var(--frv-muted-c);font-size:.9em}
.frv-empty{margin:0 0 20px;color:var(--frv-muted-c)}

/* ---- filters ---- */
.frv-filters{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:0 0 8px}
.frv-filters__chips{display:flex;flex-wrap:wrap;gap:8px}
.frv-chip{appearance:none;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 16px;border:1px solid var(--frv-line-c);border-radius:999px;background:transparent;color:inherit;font:inherit;font-weight:500;cursor:pointer}
.frv-chip svg{width:16px;height:16px;fill:var(--frv-star,#f5a623)}
.frv-chip.is-on{border-color:var(--frv-btn-bg,var(--frv-accent,#111827));box-shadow:inset 0 0 0 1px var(--frv-btn-bg,var(--frv-accent,#111827))}
.frv-sort select{appearance:none;min-height:40px;padding:8px 40px 8px 14px;border:1px solid var(--frv-input-border,var(--frv-line-c));border-radius:var(--frv-input-radius,8px);background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23666' stroke-width='1.6'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 12px center;color:inherit;font:inherit;cursor:pointer}

/* ---- review / question cards ---- */
.frv-list{display:flex;flex-direction:column}
.frv-review{padding:24px 0;border-top:1px solid var(--frv-line-c)}
.frv-review__head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-bottom:6px}
.frv-review__author{font-weight:600}
.frv-review__date{color:var(--frv-muted-c);font-size:.85em;margin-left:auto}
.frv-review__rating{margin-bottom:8px}
.frv-badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;background:rgba(23,178,106,.12);color:#067647;font-size:.78em;font-weight:600}
.frv-review__title{margin:0 0 4px;font-weight:600}
.frv-review__body{margin:0;line-height:1.6;overflow-wrap:anywhere}
.frv-pc{margin:8px 0 0;line-height:1.55;overflow-wrap:anywhere}
.frv-pc b{font-weight:600}
.frv-review__photos{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.frv-reply{margin-top:14px;padding:12px 16px;border-left:3px solid var(--frv-btn-bg,var(--frv-accent,#111827));background:var(--frv-soft);border-radius:0 8px 8px 0}
.frv-reply p{margin:0;line-height:1.55}
.frv-reply__label{font-weight:600;margin-bottom:4px!important;font-size:.9em}
.frv-review__foot{margin-top:12px}
.frv-helpful{appearance:none;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--frv-line-c);border-radius:999px;background:transparent;color:inherit;font:inherit;font-size:.875em;cursor:pointer}
.frv-helpful svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.frv-helpful span{color:var(--frv-muted-c)}
.frv-helpful.is-on{border-color:var(--frv-btn-bg,#111827);cursor:default}
.frv-helpful.is-on svg{fill:var(--frv-btn-bg,#111827);stroke:var(--frv-btn-bg,#111827)}
.frv-more{margin-top:16px}

/* ---- dialog + forms ----
   Themes style <dialog>, inputs and buttons globally (width:100%, max-width:none,
   big paddings), so the box model here is pinned with higher specificity. */
dialog.frv-dialog{box-sizing:border-box!important;border:0!important;padding:0!important;margin:auto!important;width:min(560px,calc(100vw - 32px))!important;max-width:min(560px,calc(100vw - 32px))!important;height:auto!important;max-height:min(760px,calc(100vh - 48px))!important;border-radius:16px;background:#fff;color:#111;font:inherit;box-shadow:0 24px 48px -12px rgba(0,0,0,.28);overflow:hidden}
dialog.frv-dialog::backdrop{background:rgba(0,0,0,.45)}
dialog.frv-dialog[open]{display:flex;flex-direction:column}
dialog.frv-dialog--photo{width:min(1000px,calc(100vw - 32px))!important;max-width:min(1000px,calc(100vw - 32px))!important;background:#111;color:#fff}
.frv-dialog__box{position:relative;display:flex;flex-direction:column;min-height:0;max-height:inherit;padding:24px 24px 0;overflow:auto;font-size:15px;line-height:1.45}
.frv-dialog--photo .frv-dialog__box{padding:16px}
.frv-dialog__x{appearance:none;position:absolute;top:12px;right:12px;width:32px!important;height:32px;min-height:0!important;padding:0!important;border:0!important;border-radius:50%;background:transparent!important;color:inherit;font-size:24px;line-height:1;cursor:pointer}
.frv-dialog__x:hover{background:rgba(0,0,0,.06)!important}
.frv-dialog__title{margin:0 40px 2px 0;font-size:1.25em;font-weight:700;line-height:1.25}
.frv-form{display:flex;flex-direction:column;gap:12px}
.frv-form .frv-small{margin:0 0 4px}
.frv-pick{border:0;padding:0;margin:4px 0 0;min-width:0}
.frv-pick legend{padding:0;margin-bottom:4px;font-weight:600;font-size:.93em}
/* Row-reverse + sibling selector: hovering/checking a star lights it and all lower ones. */
.frv-pick__stars{display:inline-flex;flex-direction:row-reverse;gap:2px}
.frv-pick input{position:absolute;opacity:0;width:1px;height:1px}
.frv-pick label{cursor:pointer;line-height:0;padding:2px}
.frv-pick label svg{width:32px;height:32px;fill:rgba(0,0,0,.14);transition:fill .12s}
.frv-pick label:hover svg,.frv-pick label:hover~label svg,.frv-pick input:checked~label svg{fill:var(--frv-star,#f5a623)}
.frv-pick input:focus-visible+label{outline:2px solid var(--frv-btn-bg,#111827);outline-offset:2px;border-radius:4px}
.frv-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.frv-field{display:flex;flex-direction:column;gap:5px;font-weight:600;font-size:.93em;min-width:0}
.frv-field em{font-weight:400;font-style:normal;color:rgba(0,0,0,.5)}
.frv-dialog .frv-field input,.frv-dialog .frv-field textarea{box-sizing:border-box!important;width:100%!important;max-width:100%!important;min-height:0!important;margin:0!important;font:inherit;font-size:15px;font-weight:400;color:inherit;padding:9px 12px!important;border:1px solid var(--frv-input-border,rgba(0,0,0,.18))!important;border-radius:var(--frv-input-radius,10px)!important;background:#fff!important;box-shadow:none!important;line-height:1.4}
.frv-dialog .frv-field input{height:42px!important}
.frv-dialog .frv-field textarea{resize:vertical;height:auto!important}
.frv-dialog .frv-field textarea[name="pros"],.frv-dialog .frv-field textarea[name="cons"]{min-height:64px!important}
.frv-dialog .frv-field textarea[name="body"]{min-height:96px!important}
.frv-dialog .frv-field input:focus,.frv-dialog .frv-field textarea:focus{outline:2px solid var(--frv-btn-bg,#111827)!important;outline-offset:-1px;border-color:transparent!important}
.frv-uploads{display:flex;flex-wrap:wrap;gap:8px}
.frv-uploads:empty{display:none}
.frv-upload__item{position:relative;width:64px;height:64px;border-radius:8px;overflow:hidden;background:rgba(0,0,0,.06)}
.frv-upload__item img{width:100%;height:100%;object-fit:cover}
.frv-upload__item.is-busy img{opacity:.45}
.frv-upload__item.is-busy::after{content:"";position:absolute;inset:22px;border:2px solid rgba(0,0,0,.25);border-top-color:#111;border-radius:50%;animation:frv-spin .8s linear infinite}
.frv-upload__item button{position:absolute;top:3px;right:3px;width:20px!important;height:20px;min-height:0!important;padding:0!important;border:0!important;border-radius:50%;background:rgba(0,0,0,.6)!important;color:#fff;font:inherit;font-size:14px;line-height:20px;cursor:pointer}
.frv-upload{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:8px 14px;border:1px dashed rgba(0,0,0,.3);border-radius:var(--frv-input-radius,10px);font-weight:500;font-size:.93em;cursor:pointer}
.frv-upload svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.frv-error{margin:0;color:#b42318;font-weight:500;font-size:.93em}
/* Actions stay visible: sticky footer inside the scrolling box. */
.frv-form__actions{position:sticky;bottom:0;display:flex;gap:10px;flex-wrap:wrap;margin:4px -24px 0;padding:14px 24px 18px;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 14px)}
.frv-dialog .frv-form__actions .frv-btn{min-height:44px;padding:8px 20px}
.frv-dialog__box>p:not([class]){margin:8px 0 0}
.frv-dialog__box>.frv-form__actions:last-child{margin-top:12px}
@keyframes frv-spin{to{transform:rotate(360deg)}}

.frv-lightbox{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px}
.frv-lightbox img{max-width:100%;max-height:calc(100vh - 140px);border-radius:8px;display:block}
.frv-lightbox__nav{appearance:none;position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:28px;line-height:1;cursor:pointer}
.frv-lightbox__nav.is-prev{left:6px}
.frv-lightbox__nav.is-next{right:6px}
.frv-dialog--photo .frv-muted{color:rgba(255,255,255,.7)}

@media (max-width:720px){
  .frv{margin:40px auto}
  .frv-overview{grid-template-columns:1fr;padding:20px}
  .frv-cta{padding:16px}
  .frv-cta .frv-btn{width:100%}
  .frv-review__date{margin-left:0;width:100%}
  dialog.frv-dialog:not(.frv-dialog--photo){width:100vw!important;max-width:100vw!important;max-height:92vh!important;margin:auto 0 0!important;border-radius:16px 16px 0 0}
  .frv-dialog__box{padding:20px 16px 0}
  .frv-form__actions{margin:4px -16px 0;padding:12px 16px calc(14px + env(safe-area-inset-bottom))}
  .frv-form__actions .frv-btn{flex:1}
  .frv-row{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.frv *,.frv-dialog *{transition:none!important;animation:none!important}}