/* The storefront reviews widget (reviews-widget.js). Everything is under .ycr and reads its colors
   from --ycr-* variables with fallbacks, so the store's theme (or the hub's preview) can set them
   and nothing here leaks into the page around it. */
.ycr { --ycr-ink: #252024; --ycr-soft: #5E585C; --ycr-line: #E7E3DC; --ycr-star: #7B3B50; --ycr-star-off: #D9D4CC; --ycr-bar: #7BA05B; --ycr-accent: #5A7E3F; --ycr-chip: #E8F0DC; --ycr-reply: #F1EEE8; --ycr-surface: transparent;
  color: var(--ycr-ink); background: var(--ycr-surface); font: inherit; line-height: 1.55; display: flex; flex-direction: column; gap: 18px; }
.ycr *, .ycr *::before, .ycr *::after { box-sizing: border-box; }
/* The block on a store page: a set width (a flex row would otherwise shrink it to its longest
   line, a different width on every product) and room above it for a sticky header when the star
   line scrolls here. Both can be set from the theme. */
[data-yc-reviews] { box-sizing: border-box; width: 100%; max-width: var(--ycr-max-width, 880px); margin-inline: auto; flex: 0 1 auto; scroll-margin-top: var(--ycr-scroll-gap, 112px); }
/* Headings and the big average take the page's heading font (--ycr-heading-font, else Horizon's --font-heading--family), text takes its body font. */
.ycr h2 { margin: 0; font-size: 1.35em; line-height: 1.2; font-family: var(--ycr-heading-font, var(--font-heading--family, inherit)); font-weight: 800; }
.ycr p { margin: 0; }
.ycr-head { display: flex; flex-wrap: wrap; gap: 16px 36px; align-items: center; }
.ycr-avg { font-size: 2.3em; font-weight: 800; line-height: 1; font-family: var(--ycr-heading-font, var(--font-heading--family, inherit)); }
.ycr-soft { color: var(--ycr-soft); font-size: .9em; }
.ycr-stars { color: var(--ycr-star); letter-spacing: 1px; white-space: nowrap; }
.ycr-stars i { font-style: normal; color: var(--ycr-star-off); }
.ycr-bars { display: grid; grid-template-columns: auto minmax(90px, 220px) auto; gap: 4px 8px; align-items: center; font-size: .85em; font-variant-numeric: tabular-nums; }
.ycr-bars button { display: contents; cursor: pointer; font: inherit; color: inherit; }
.ycr-bar { height: 6px; border-radius: 3px; background: var(--ycr-line); overflow: hidden; }
.ycr-bar b { display: block; height: 100%; background: var(--ycr-bar); }
.ycr-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ycr-chip { font: inherit; font-size: .85em; color: var(--ycr-ink); background: transparent; border: 1px solid var(--ycr-line); border-radius: 99px; padding: 5px 12px; cursor: pointer; }
.ycr-chip[aria-pressed="true"] { background: var(--ycr-chip); border-color: var(--ycr-bar); color: var(--ycr-accent); font-weight: 600; }
.ycr-write { margin-left: auto; font: inherit; font-weight: 600; color: #fff; background: var(--ycr-fill, var(--ycr-accent)); border: 0; border-radius: 8px; padding: 10px 18px; text-decoration: none; cursor: pointer; }
.ycr-list { list-style: none; margin: 0; padding: 0; }
.ycr-item { padding: 16px 0; border-top: 1px solid var(--ycr-line); display: flex; flex-direction: column; gap: 6px; }
.ycr-top { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.ycr-name { font-weight: 600; }
.ycr-verified { font-size: .8em; color: var(--ycr-accent); background: var(--ycr-chip); border-radius: 99px; padding: 1px 9px; }
.ycr-date { margin-left: auto; }
.ycr-title { font-weight: 600; }
.ycr-body { white-space: pre-line; overflow-wrap: anywhere; }
.ycr-media { display: flex; flex-wrap: wrap; gap: 8px; }
.ycr-media a { display: block; width: 76px; height: 76px; border-radius: 8px; overflow: hidden; border: 1px solid var(--ycr-line); background: var(--ycr-reply); color: var(--ycr-soft); font-size: .8em; text-decoration: none; text-align: center; line-height: 76px; }
.ycr-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ycr-reply { background: var(--ycr-reply); border-radius: 8px; padding: 10px 12px; font-size: .95em; }
.ycr-reply b { display: block; }
.ycr-more { align-self: center; font: inherit; font-weight: 600; color: var(--ycr-ink); background: transparent; border: 1px solid var(--ycr-line); border-radius: 8px; padding: 9px 18px; cursor: pointer; }
.ycr-more:disabled { opacity: .55; cursor: default; }
.ycr-empty { padding: 16px 0; border-top: 1px solid var(--ycr-line); }
.ycr :focus-visible { outline: 2px solid var(--ycr-accent); outline-offset: 2px; }
/* The star line under the product title (data-yc-stars). It sits outside .ycr, so it names its own colors. */
.ycr-line { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; color: var(--ycr-ink, inherit); text-decoration: none; font: inherit; font-size: .95em; line-height: 1.4; padding: 4px 0; }
.ycr-line .ycr-stars { color: var(--ycr-star, #7B3B50); letter-spacing: 1px; white-space: nowrap; }
.ycr-line .ycr-stars i { font-style: normal; color: var(--ycr-star-off, #D9D4CC); }
.ycr-line-avg { font-weight: 600; }
.ycr-line-count { text-decoration: underline; text-underline-offset: 2px; }
.ycr-line:focus-visible { outline: 2px solid var(--ycr-accent, #5A7E3F); outline-offset: 2px; }

/* A photo opened over the page (outside .ycr, so it names its own colors). */
.ycr-box { position: fixed; inset: 0; z-index: 2147483000; background: rgba(17,17,17,.88); display: flex; align-items: center; justify-content: center; padding: 56px 12px 24px; }
.ycr-box img, .ycr-box video { max-width: min(100%, 1100px); max-height: 100%; border-radius: 8px; display: block; }
.ycr-box button { font: inherit; color: #fff; background: rgba(17,17,17,.6); border: 1px solid rgba(255,255,255,.5); cursor: pointer; }
.ycr-box-x { position: absolute; top: 10px; right: 12px; min-height: 40px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.ycr-box-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 999px; font-size: 26px; line-height: 1; }
.ycr-box-prev { left: 10px; } .ycr-box-next { right: 10px; }
.ycr-box button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }