/*
 * Ellie Belle Reviews & Reputation -- storefront styles (2026-10-20).
 * Editorial, understated, designer-fashion. Everything is scoped under
 * .eb-reviews so it never collides with the live theme. Colors and type follow
 * the Ellie Belle brand; fonts inherit the theme with graceful fallbacks.
 * Loaded alongside reviews.js from admin.elliebelle.com. Inert until mounted.
 */
.eb-reviews {
  --eb-ivory: #fafaf8;
  --eb-ink: #1c1c1c;
  --eb-ink-70: rgba(28, 28, 28, 0.7);
  --eb-ink-55: rgba(28, 28, 28, 0.55);
  --eb-ink-40: rgba(28, 28, 28, 0.4);
  --eb-gold: #8e7240; /* text-safe */
  --eb-gold-dec: #b89a6a; /* decorative (stars, bars) */
  --eb-line: rgba(28, 28, 28, 0.1);
  --eb-line-soft: rgba(28, 28, 28, 0.06);
  --eb-heading: "Fraunces", "Playfair Display", Georgia, serif;
  --eb-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--eb-ink);
  font-family: var(--eb-body);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
/* Match the theme's serif headings (Fraunces 400, tightened tracking). */
.eb-reviews h2,
.eb-reviews h3,
.eb-reviews .eb-summary__avg,
.eb-reviews .eb-overview__num {
  font-family: var(--eb-heading);
  font-weight: 400;
  letter-spacing: -0.02em;
}
/* Card titles read a touch smaller than product-page review titles. */
.eb-reviews .eb-card .eb-review__title {
  font-size: 15px;
}
.eb-reviews *,
.eb-reviews *::before,
.eb-reviews *::after {
  box-sizing: border-box;
}

/* Stars -------------------------------------------------------------------- */
.eb-stars {
  display: inline-flex;
  position: relative;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  font-size: 14px;
  letter-spacing: 2px;
}
.eb-stars__base {
  color: var(--eb-line);
}
.eb-stars__fill {
  color: var(--eb-gold-dec);
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
}
.eb-stars--lg {
  font-size: 18px;
}

/* Inline rating near the product title ------------------------------------ */
.eb-rating-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  color: inherit;
}
.eb-rating-inline__num {
  font-weight: 600;
  font-size: 14px;
}
.eb-rating-inline__count {
  color: var(--eb-ink-55);
  font-size: 14px;
  border-bottom: 1px solid transparent;
}
.eb-rating-inline:hover .eb-rating-inline__count {
  border-bottom-color: var(--eb-ink-40);
}
.eb-rating-inline--empty {
  cursor: pointer;
  color: var(--eb-ink-55);
  font-size: 13px;
  letter-spacing: 0.02em;
}

/* Compact rating on a collection grid card -------------------------------- */
/* Sits directly beneath the product title and above the price, on one line,
   with tight vertical rhythm so card height stays consistent whether or not a
   card is rated. Font inherits the theme's card typography. */
.eb-card-rating-slot {
  margin: 2px 0 4px;
  line-height: 1;
}
.eb-card-rating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  text-decoration: none;
  color: inherit;
  font-family: inherit;
  line-height: 1;
}
.eb-card-rating .eb-stars {
  font-size: 13.5px;
  letter-spacing: 1.5px;
}
.eb-card-rating__count {
  color: var(--eb-ink-55);
  font-size: 12px;
  letter-spacing: 0.01em;
}
a.eb-card-rating:hover .eb-card-rating__count {
  color: var(--eb-ink-85, #1c1c1c);
}

/* Section scaffolding ----------------------------------------------------- */
.eb-section {
  margin: 40px 0;
  font-family: var(--eb-body);
}
.eb-section__tabs {
  display: flex;
  gap: 28px;
  border-bottom: 1px solid var(--eb-line);
  margin-bottom: 28px;
}
.eb-tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0 0 12px;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--eb-ink-55);
  cursor: pointer;
}
.eb-tab--active {
  color: var(--eb-ink);
  border-bottom-color: var(--eb-gold-dec);
}

/* Summary + distribution -------------------------------------------------- */
.eb-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  margin-bottom: 28px;
}
.eb-summary__score {
  text-align: center;
  min-width: 120px;
}
.eb-summary__avg {
  font-family: var(--eb-heading);
  font-size: 48px;
  line-height: 1;
  font-weight: 400;
}
.eb-summary__based {
  color: var(--eb-ink-55);
  font-size: 13px;
  margin-top: 8px;
}
.eb-dist {
  flex: 1 1 320px;
  min-width: 260px;
}
.eb-dist__row {
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  align-items: center;
  gap: 12px;
  margin: 4px 0;
  font-size: 13px;
  color: var(--eb-ink-55);
}
.eb-dist__bar {
  height: 6px;
  background: var(--eb-line-soft);
  border-radius: 999px;
  overflow: hidden;
}
.eb-dist__fill {
  height: 100%;
  background: var(--eb-gold-dec);
  border-radius: 999px;
}
.eb-dist__count {
  text-align: right;
}

/* Controls ---------------------------------------------------------------- */
.eb-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin: 24px 0;
}
.eb-controls__group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.eb-select,
.eb-search {
  font-family: inherit;
  font-size: 13px;
  color: var(--eb-ink);
  background: #fff;
  border: 1px solid var(--eb-line);
  border-radius: 2px;
  padding: 8px 12px;
}
.eb-search {
  min-width: 220px;
}
.eb-chip {
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--eb-ink-70);
  background: #fff;
  border: 1px solid var(--eb-line);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
}
.eb-chip--active {
  color: var(--eb-ink);
  border-color: var(--eb-gold-dec);
  background: rgba(184, 154, 106, 0.08);
}

/* Button ------------------------------------------------------------------ */
.eb-btn {
  display: inline-block;
  font-family: var(--eb-body);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--eb-ink);
  background: #fff;
  border: 1px solid var(--eb-ink);
  border-radius: 2px;
  padding: 12px 28px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.eb-btn:hover {
  background: var(--eb-ink);
  color: #fff;
}
.eb-btn--ghost {
  border-color: var(--eb-line);
  color: var(--eb-ink-70);
}
.eb-btn--block {
  display: block;
  width: 100%;
  text-align: center;
}

/* Review -- product-page editorial list ----------------------------------- */
.eb-review {
  padding: 32px 0;
  border-bottom: 1px solid var(--eb-line-soft);
}
.eb-review__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.eb-review__name {
  font-weight: 500;
  font-size: 14px;
}
.eb-review__date {
  color: var(--eb-ink-55);
  font-size: 13px;
  white-space: nowrap;
}
.eb-review__verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--eb-gold);
  font-size: 12px;
  letter-spacing: 0.02em;
  margin-left: 10px;
}
.eb-review__source {
  margin-top: 4px;
  color: var(--eb-ink-40);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.eb-review__source-link {
  color: var(--eb-ink-40);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.eb-review__source-link:hover {
  color: var(--eb-ink-70);
}
.eb-review__title {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  margin: 16px 0 8px;
}
.eb-review__body {
  color: var(--eb-ink-70);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
}
.eb-review__product {
  margin-top: 12px;
  font-size: 12px;
  color: var(--eb-ink-55);
}
.eb-review__product a {
  color: var(--eb-gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.eb-review__product a:hover {
  border-bottom-color: var(--eb-gold-dec);
}
.eb-review__media {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.eb-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid var(--eb-line-soft);
  cursor: pointer;
  background: var(--eb-line-soft);
}
.eb-review__reply {
  margin-top: 14px;
  padding: 12px 16px;
  background: var(--eb-ivory);
  border-left: 2px solid var(--eb-gold-dec);
}
.eb-review__reply strong {
  color: var(--eb-ink);
  font-weight: 500;
}
.eb-review__reply-label {
  font-family: var(--eb-heading);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--eb-gold-text, #8e7240);
}
.eb-review__reply-body {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--eb-ink-70);
  white-space: pre-wrap;
}

/* Card grid -- store showcase + standalone page --------------------------- */
.eb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.eb-card {
  border: 1px solid var(--eb-line);
  border-radius: 3px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.eb-card__media {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  background: var(--eb-line-soft);
  display: block;
}
.eb-card__body {
  padding: 22px;
}
.eb-card__name {
  font-weight: 500;
  font-size: 14px;
}
.eb-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 12px;
}
.eb-card__date {
  color: var(--eb-ink-55);
  font-size: 13px;
}
.eb-card__text {
  color: var(--eb-ink-70);
  font-size: 15px;
  line-height: 1.6;
}
.eb-card__source {
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--eb-ink-55);
  text-transform: uppercase;
}
.eb-card__source a {
  color: var(--eb-gold);
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
}

/* Fallback heading -------------------------------------------------------- */
.eb-fallback__head {
  font-family: var(--eb-heading);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.eb-fallback__sub {
  color: var(--eb-ink-55);
  font-size: 14px;
  margin: 6px 0 24px;
  max-width: 560px;
}
.eb-fallback__actions {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 24px;
  flex-wrap: wrap;
}

/* Standalone page hero/overview ------------------------------------------- */
.eb-overview {
  display: flex;
  gap: 56px;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 0 28px;
  border-bottom: 1px solid var(--eb-line);
  margin-bottom: 28px;
}
.eb-overview__block {
  text-align: center;
}
.eb-overview__num {
  font-family: var(--eb-heading);
  font-size: 34px;
  line-height: 1;
}
.eb-overview__label {
  color: var(--eb-ink-55);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 8px;
}

/* Empty / loading --------------------------------------------------------- */
.eb-empty {
  text-align: center;
  color: var(--eb-ink-55);
  font-size: 14px;
  padding: 32px 0;
}
.eb-center {
  text-align: center;
  margin-top: 28px;
}

/* Image viewer ------------------------------------------------------------ */
.eb-viewer {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 18, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  padding: 24px;
}
.eb-viewer__img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.eb-viewer__close {
  position: absolute;
  top: 18px;
  right: 22px;
  background: none;
  border: 0;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
}

/* Modal (submission) ------------------------------------------------------ */
.eb-modal {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 18, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99998;
  padding: 24px;
}
.eb-modal__panel {
  background: var(--eb-ivory);
  border-radius: 4px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow: auto;
  padding: 32px;
}
.eb-modal__title {
  font-family: var(--eb-heading);
  font-size: 22px;
  font-weight: 400;
  margin: 0 0 4px;
}
.eb-field {
  margin-top: 18px;
}
.eb-field__label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--eb-ink-55);
  margin-bottom: 6px;
}
.eb-input,
.eb-textarea {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: var(--eb-ink);
  background: #fff;
  border: 1px solid var(--eb-line);
  border-radius: 2px;
  padding: 10px 12px;
}
.eb-textarea {
  min-height: 120px;
  resize: vertical;
}
.eb-starpick {
  display: inline-flex;
  gap: 6px;
  font-size: 26px;
  color: var(--eb-line);
  cursor: pointer;
}
.eb-starpick__star--on {
  color: var(--eb-gold-dec);
}
.eb-modal__actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  justify-content: flex-end;
}
.eb-note {
  font-size: 12px;
  color: var(--eb-ink-55);
  margin-top: 8px;
}
.eb-error {
  color: #9a3b32;
  font-size: 13px;
  margin-top: 10px;
}

/* Responsive -------------------------------------------------------------- */
@media (max-width: 900px) {
  .eb-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .eb-grid {
    grid-template-columns: 1fr;
  }
  .eb-summary {
    gap: 24px;
  }
  .eb-overview {
    gap: 28px;
  }
  .eb-controls {
    flex-direction: column;
    align-items: stretch;
  }
  .eb-search {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------------
 * Theme compatibility. Some storefront themes (Xclusive, the live Ellie Belle
 * theme) decorate every <button> with a black ::before fill overlay for a hover
 * animation and force a native button appearance. That overlay sits on top of
 * our transparent controls and renders the tabs and filter chips as solid black.
 * Neutralize the pseudo-elements on our scoped buttons and lock the intended
 * backgrounds so the controls render as designed regardless of the host theme.
 * ------------------------------------------------------------------------- */
.eb-reviews button {
  -webkit-appearance: none;
  appearance: none;
  /* Some themes float buttons left; a floated child gives its block parent zero
     height, which collapses the inline product rating and lets the price slide
     up beside it. Keep our controls in normal flow so the rating holds its own
     line under the product title. */
  float: none !important;
}
.eb-reviews button::before,
.eb-reviews button::after {
  content: none !important;
  display: none !important;
  background: none !important;
}
.eb-reviews .eb-chip {
  background-color: #fff !important;
}
.eb-reviews .eb-chip--active {
  background-color: rgba(184, 154, 106, 0.08) !important;
}
.eb-reviews .eb-tab {
  background-color: transparent !important;
}
.eb-reviews .eb-btn {
  background-color: #fff !important;
}
.eb-reviews .eb-btn:hover {
  background-color: var(--eb-ink) !important;
  color: #fff !important;
}
.eb-reviews .eb-btn--ghost {
  background-color: #fff !important;
}

/* Sort/select controls. The theme paints a dark double-chevron background image
   on every <select> at high specificity (#root #content .f8sr select), which
   showed through our sort control. Reset the native appearance and supply our
   own single caret so the control reads as an intentional, understated dropdown. */
.eb-reviews select.eb-select,
.eb-reviews .eb-controls__group select {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231c1c1c' stroke-width='1.4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 10px 6px !important;
  padding-right: 34px !important;
}

/* Hover states. The theme's button:hover turns the label white, which blanked
   our chips on hover. Lock text colors and backgrounds on hover for our scoped
   controls (and keep the pseudo-element overlay suppressed on hover too). */
.eb-reviews .eb-chip:hover {
  background-color: #fff !important;
  color: var(--eb-ink-70) !important;
}
.eb-reviews .eb-chip--active:hover {
  background-color: rgba(184, 154, 106, 0.08) !important;
  color: var(--eb-ink) !important;
}
.eb-reviews .eb-tab:hover {
  color: var(--eb-ink) !important;
  background-color: transparent !important;
}
.eb-reviews .eb-rating-inline:hover {
  color: inherit !important;
  background: none !important;
}
.eb-reviews button:hover::before,
.eb-reviews button:hover::after {
  content: none !important;
  display: none !important;
}

/* "What Our Clients Are Saying" showcase band (footer or any section). */
.eb-showcase {
  margin: 48px 0;
}
.eb-showcase__head {
  text-align: center;
  margin-bottom: 28px;
}
.eb-showcase__title {
  font-family: var(--eb-heading);
  font-size: 28px;
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.02em;
}
.eb-showcase__sub {
  color: var(--eb-ink-55);
  font-size: 14px;
  margin: 8px 0 0;
}
.eb-showcase__actions {
  text-align: center;
  margin-top: 32px;
}

/* Typography scales down a step on small screens; body text stays legible. */
@media (max-width: 600px) {
  .eb-reviews { font-size: 15px; }
  .eb-showcase__title { font-size: 24px; }
  .eb-fallback__head { font-size: 22px; }
  .eb-summary__avg { font-size: 40px; }
  .eb-overview__num { font-size: 30px; }
  .eb-review { padding: 24px 0; }
  .eb-review__title { font-size: 15px; }
  .eb-review__body,
  .eb-card__text { font-size: 15px; }
}