/* WOM Widget v4 — Embeddable Review Widget Styles */
/* This file is auto-served from the CDN. Do not edit directly — source from tmp/widget-v4-mockup.html */

/* ============================================
   DESIGN SYSTEM TOKENS
   Matching Growth+ dashboard design system
   ============================================ */
:root {
  --wom-font-body: 'Plus Jakarta Sans', sans-serif;
  --wom-font-display: 'Bricolage Grotesque', sans-serif;
  --wom-dark: #1F1F1F;
  --wom-orange: #FF4800;
  --wom-orange-light: #FFF4EF;
  --wom-star: #FFBF54;
  --wom-google-blue: #4285F4;
  --wom-google-bg: #EEF4FF;
  --wom-gray-50: #F9FAFB;
  --wom-gray-100: #F3F4F6;
  --wom-gray-200: #E5E7EB;
  --wom-gray-300: #D1D5DB;
  --wom-gray-400: #9CA3AF;
  --wom-gray-500: #6B7280;
  --wom-gray-600: #4B5563;
  --wom-gray-700: #374151;
  --wom-shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px -1px rgba(0,0,0,0.04);
  --wom-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --wom-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  --wom-radius: 12px;
  --wom-radius-sm: 8px;
  --wom-radius-lg: 16px;
}

/* ============================================
   BASE RESET — must come before component rules
   so component padding/margin can override
   ============================================ */
.wom-widget-v4 {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.5;
  /* The token, not a literal. This is the root of every widget, so anything
     that doesn't set its own colour inherits from here — and a hardcoded
     near-black meant the whole dark theme rendered dark-on-dark. The rating
     total, the review counts and the badge text were all invisible. */
  color: var(--wom-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.wom-widget-v4 *, .wom-widget-v4 *::before, .wom-widget-v4 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ============================================
   SHARED WIDGET STYLES
   These would ship in widget-v4.css
   ============================================ */

/* Stars */
.w4-stars {
  display: inline-flex;
  gap: 2px;
}
.w4-star {
  width: 18px;
  height: 18px;
  color: var(--wom-star);
}
.w4-star--sm { width: 14px; height: 14px; }
.w4-star--lg { width: 22px; height: 22px; }

/* Source badge */
.w4-source {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 100px;
  letter-spacing: 0.02em;
}
.w4-source--wom {
  color: var(--wom-orange);
}
.w4-source--google {
  color: var(--wom-google-blue);
}
.w4-source__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;

}

/* Avatar */
.w4-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}
.w4-avatar--wom,
.w4-avatar--google {
  background: #F5F3EE;
  color: #042729;
}
.w4-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* WOM icon */
.w4-wom-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: inline-block;
}
.w4-wom-icon--lg {
  width: 32px;
  height: 32px;
}

/* Google icon — match WOM icon sizes */
.w4-google-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;

}
.w4-google-icon--lg {
  width: 32px;
  height: 32px;
}

/* ============================================
   1. HORIZONTAL CAROUSEL (Loox-inspired)
   ============================================ */
.w4-carousel {
  font-family: var(--wom-font-body);
  background: white;
  border: 1px solid var(--wom-gray-200);
  border-radius: var(--wom-radius-lg);
  overflow: hidden;
  box-shadow: var(--wom-shadow-sm);
}

.w4-carousel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--wom-gray-100);
}

.w4-carousel__header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.w4-carousel__ratings {
  display: flex;
  align-items: center;
  gap: 20px;
}

.w4-carousel__rating-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.w4-carousel__rating-score {
  font-family: var(--wom-font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--wom-dark);
  line-height: 1;
}

.w4-carousel__rating-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.w4-carousel__rating-count {
  font-size: 13px;
  color: var(--wom-gray-500);
}

.w4-carousel__divider {
  width: 1px;
  height: 40px;
  background: var(--wom-gray-200);
}

.w4-carousel__nav,
.w4-masonry__nav {
  display: flex;
  gap: 8px;
}

.w4-carousel__nav-btn,
.w4-masonry__nav-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--wom-gray-300);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--wom-gray-600);
}
.w4-carousel__nav-btn:hover,
.w4-masonry__nav-btn:hover {
  background: var(--wom-gray-50);
  border-color: var(--wom-gray-400);
}

.w4-carousel__track {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0;
}
.w4-carousel__track::-webkit-scrollbar { display: none; }

.w4-carousel__card {
  flex: 0 0 320px;
  scroll-snap-align: start;
  padding: 24px;
  border-right: 1px solid var(--wom-gray-100);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.w4-carousel__card:last-child {
  border-right: none;
}

.w4-carousel__card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.w4-carousel__card-author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.w4-carousel__card-author > div:not(.w4-avatar) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
}
.w4-carousel__card-author > div:not(.w4-avatar) > .w4-stars {
  width: 100%;
  order: 1;
}
.w4-carousel__card-name {
  font-family: var(--wom-font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--wom-dark);
}

.w4-carousel__card-date {
  font-size: 12px;
  color: var(--wom-gray-400);
}

.w4-carousel__card-title {
  font-family: var(--wom-font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--wom-dark);
  line-height: 1.3;
  margin-top: 6px;
}

.w4-carousel__card-text {
  font-size: 14px;
  color: var(--wom-gray-600);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.w4-carousel__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border-top: 1px solid var(--wom-gray-100);
  font-size: 13px;
  color: var(--wom-gray-500);
  gap: 6px;
}
.w4-carousel__footer a {
  color: var(--wom-orange);
  text-decoration: none;
  font-weight: 600;
}

/* ============================================
   2. VERTICAL FEED (Trustpilot-inspired)
   ============================================ */
.w4-feed {
  font-family: var(--wom-font-body);
  background: white;
  border: 1px solid var(--wom-gray-200);
  border-radius: var(--wom-radius-lg);
  overflow: hidden;
  box-shadow: var(--wom-shadow-sm);
  max-width: 480px;
}

.w4-feed__header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--wom-gray-100);
}

.w4-feed__header-ratings {
  display: flex;
  align-items: center;
  gap: 24px;
}

.w4-feed__header-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.w4-feed__header-group .w4-wom-icon,
.w4-feed__header-group .w4-google-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.w4-feed__header-score {
  font-family: var(--wom-font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--wom-dark);
  line-height: 1;
}

.w4-feed__header-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.w4-feed__header-meta .w4-stars {
  line-height: 1;
}

.w4-feed__header-count {
  font-size: 12px;
  color: var(--wom-gray-500);
  margin-top: 2px;
}

.w4-feed__header-divider {
  width: 1px;
  align-self: stretch;
  background: var(--wom-gray-200);
}

.w4-feed__list {
  max-height: 420px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--wom-gray-300) transparent;
}

.w4-feed__item {
  padding: 20px 24px;
  border-bottom: 1px solid var(--wom-gray-100);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.w4-feed__item:last-child { border-bottom: none; }

.w4-feed__item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.w4-feed__item-author {
  display: flex;
  align-items: center;
  gap: 10px;
}
.w4-feed__item-author > div:not(.w4-avatar) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
}
.w4-feed__item-author > div:not(.w4-avatar) > .w4-stars {
  width: 100%;
  order: 1;
}

.w4-feed__item-name {
  font-family: var(--wom-font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--wom-dark);
}

.w4-feed__item-date {
  font-size: 12px;
  color: var(--wom-gray-400);
}

.w4-feed__item-title {
  font-family: var(--wom-font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--wom-dark);
  margin-top: 6px;
}

.w4-feed__item-text {
  font-size: 14px;
  color: var(--wom-gray-600);
  line-height: 1.6;
}

.w4-feed__footer {
  text-align: center;
  padding: 16px;
  border-top: 1px solid var(--wom-gray-100);
}
.w4-feed__footer a {
  color: var(--wom-orange);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}

/* ============================================
   3. RATING BOX — HORIZONTAL
   ============================================ */
.w4-ratingbox {
  font-family: var(--wom-font-body);
  background: white;
  border: 1px solid var(--wom-gray-200);
  border-radius: var(--wom-radius);
  padding: 20px 24px;
  box-shadow: var(--wom-shadow-sm);
  display: inline-flex;
  align-items: center;
  gap: 20px;
}

.w4-ratingbox__group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.w4-ratingbox__score {
  font-family: var(--wom-font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--wom-dark);
  line-height: 1;
}

.w4-ratingbox__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.w4-ratingbox__count {
  font-size: 13px;
  color: var(--wom-gray-500);
}

.w4-ratingbox__divider {
  width: 1px;
  height: 40px;
  background: var(--wom-gray-200);
}

/* ============================================
   4. RATING BOX — VERTICAL (compact)
   ============================================ */
.w4-ratingbox-vert {
  font-family: var(--wom-font-body);
  background: white;
  border: 1px solid var(--wom-gray-200);
  border-radius: var(--wom-radius);
  padding: 24px;
  box-shadow: var(--wom-shadow-sm);
  text-align: center;
  max-width: 220px;
}

.w4-ratingbox-vert__groups {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.w4-ratingbox-vert__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.w4-ratingbox-vert__score {
  font-family: var(--wom-font-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--wom-dark);
  line-height: 1;
}

.w4-ratingbox-vert__count {
  font-size: 12px;
  color: var(--wom-gray-500);
}

.w4-ratingbox-vert__divider {
  width: 60%;
  height: 1px;
  background: var(--wom-gray-200);
  margin: 0 auto;
}

/* ============================================
   5. INLINE RATING
   ============================================ */
.w4-inline {
  font-family: var(--wom-font-body);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: white;
  border: 1px solid var(--wom-gray-200);
  border-radius: var(--wom-radius-sm);
  padding: 10px 16px;
  box-shadow: var(--wom-shadow-sm);
}

.w4-inline__group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.w4-inline__score {
  font-family: var(--wom-font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--wom-dark);
}

.w4-inline__count {
  font-size: 13px;
  color: var(--wom-gray-500);
}

.w4-inline__pipe {
  color: var(--wom-gray-300);
  font-size: 16px;
}

/* ============================================
   6. MASONRY GRID
   ============================================ */
.w4-masonry {
  font-family: var(--wom-font-body);
}
.w4-masonry__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--wom-gray-200);
}
.w4-masonry__header-rating {
  display: flex;
  align-items: center;
  gap: 8px;
}
.w4-masonry__header-count {
  font-family: var(--wom-font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--wom-dark);
}
.w4-masonry__grid {
  columns: 4;
  column-gap: 16px;
}
@media (max-width: 1024px) {
  .w4-masonry__grid { columns: 3; }
}
@media (max-width: 768px) {
  .w4-masonry__grid { columns: 2; }
}
@media (max-width: 480px) {
  .w4-masonry__grid { columns: 1; }
}
.w4-masonry__card {
  break-inside: avoid;
  background: white;
  border-radius: var(--wom-radius);
  border: 1px solid var(--wom-gray-200);
  padding: 20px;
  margin-bottom: 16px;
  display: inline-block;
  width: 100%;
}
.w4-masonry__card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}
.w4-masonry__card-author {
  display: flex;
  align-items: center;
  gap: 10px;
}
.w4-masonry__card-name {
  font-family: var(--wom-font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--wom-dark);
}
.w4-masonry__card-date {
  font-size: 12px;
  color: var(--wom-gray-400);
}
.w4-masonry__card-title {
  font-family: var(--wom-font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--wom-dark);
  margin-top: 6px;
  margin-bottom: 8px;
}
.w4-masonry__card-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--wom-gray-600);
  overflow-wrap: break-word;
  word-break: break-word;
}
.w4-masonry__card-imgs {
  position: relative;
  width: calc(100% + 40px);
  margin: -20px -20px 12px;
  overflow: hidden;
  border-radius: var(--wom-radius) var(--wom-radius) 0 0;
}
.w4-masonry__card-img {
  width: 100%;
  display: block;
  object-fit: cover;
  max-height: 220px;
}
.w4-masonry__card-imgs-more {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-family: var(--wom-font-body);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
  cursor: pointer;
}
.w4-masonry__card:has(.w4-masonry__card-imgs) .w4-masonry__card-top {
  /* When image is first child, top section sits below it */
}
.w4-masonry__footer {
  text-align: center;
  padding-top: 8px;
  font-size: 12px;
  color: var(--wom-gray-400);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* Attribution required by Google's Places policies: the reviewer's profile
   link, a link to the official Google page for the place, and a note saying
   how the reviews shown were ordered and filtered. */
/* The footers are a centred flex row that used to hold one item. They now hold
   three, so let them wrap and give the notice its own full-width line —
   without this the "View on Google" and "Powered by" links get squeezed into a
   cramped stack beside it. */
.w4-carousel__footer,
.w4-masonry__footer {
  flex-wrap: wrap;
  row-gap: 8px;
}
.w4-notice {
  font-size: 11px;
  line-height: 1.5;
  color: var(--wom-gray-400);
  flex-basis: 100%;
  text-align: center;
  /* Sits above the links rather than fighting them for the same row. */
  order: -1;
}
/* A credit to the source, not a call to action. The carousel footer styles
   every link orange and semibold, which put this in direct competition with
   our own "Powered by" branding right beside it — two identical-looking links
   with no hierarchy. It's quiet grey with Google's mark instead, so the orange
   stays on our branding alone. `a.` is needed to outrank .w4-*__footer a. */
a.w4-google-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 400;
  color: var(--wom-gray-500);
  text-decoration: none;
}
a.w4-google-link:hover {
  color: var(--wom-gray-700);
  text-decoration: underline;
}
a.w4-google-link .w4-google-icon {
  width: 13px;
  height: 13px;
}
/* Hairline between the source credit and our branding, so they read as two
   separate things rather than one run-on line. */
/* Slider Badge's attribution row. The badge sits beside a horizontal track,
   so its footer spans the full width underneath both. */
.w4-sb__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  row-gap: 6px;
  padding-top: 10px;
  width: 100%;
}

.w4-footer-sep {
  width: 1px;
  height: 12px;
  background: var(--wom-gray-300);
  display: inline-block;
  margin: 0 4px;
}
a.w4-carousel__card-name,
a.w4-masonry__card-name,
a.w4-sb__card-name {
  color: inherit;
  text-decoration: none;
}
a.w4-carousel__card-name:hover,
a.w4-masonry__card-name:hover,
a.w4-sb__card-name:hover {
  text-decoration: underline;
}

/* ============================================
   6b. GRID (aligned rows)
   ============================================
   Same cards as the Masonry widget above — the only difference is that the
   rows line up instead of staggering. Everything here is scoped to
   --flat so the Masonry widget already live on customer sites is untouched. */
.w4-masonry__grid--flat {
  columns: auto;
  display: grid;
  /* auto-fit, not auto-fill: with fewer cards than would fit, the empty tracks
     collapse and the cards widen to fill the row. Three reviews in a wide
     container used to sit in three 260px tracks with the right half empty. */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.w4-masonry__grid--flat .w4-masonry__card {
  /* Stretch every card to its row height, and let the text block absorb the
     slack, so the cards in a row end level even when one review is shorter. */
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-bottom: 0;
}
.w4-masonry__grid--flat .w4-masonry__card-text {
  /* Cut long reviews off at six lines so a rambler doesn't stretch the whole
     row. The JS adds a "Read more" to the cards that actually got cut. */
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-grow: 1;
}
.w4-masonry__grid--flat .w4-masonry__card-text--expanded {
  -webkit-line-clamp: unset;
  overflow: visible;
}
.w4-masonry__card-more {
  align-self: flex-start;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--wom-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--wom-orange);
  cursor: pointer;
}
.w4-masonry__card-more:hover {
  text-decoration: underline;
}

/* Header for the Grid and Masonry: each review source keeps its own logo and
   score rather than being averaged into one number. */
.w4-masonry__header-sources {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.w4-masonry__header-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.w4-masonry__header-score {
  font-family: var(--wom-font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--wom-dark);
  line-height: 1;
}
.w4-masonry__header-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.w4-masonry__header-divider {
  width: 1px;
  align-self: stretch;
  min-height: 32px;
  background: var(--wom-gray-200);
}
/* The count sits under the stars as a caption, so it needs to be quieter than
   the no-reviews-yet version of this class above — there it's the only text in
   the header, here it's competing with the score right next to it. */
.w4-masonry__header-meta .w4-masonry__header-count {
  font-family: var(--wom-font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--wom-gray-500);
}

/* ============================================
   7. TESTIMONIAL SLIDER (Spotlight)
   ============================================ */
.w4-slider {
  font-family: var(--wom-font-body);
  max-width: 700px;
  position: relative;
  text-align: center;
}
.w4-slider__card {
  background: white;
  border-radius: var(--wom-radius-lg);
  border: 1px solid var(--wom-gray-200);
  box-shadow: var(--wom-shadow-sm);
  padding: 40px 48px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.w4-slider__stars {
  display: flex;
  gap: 4px;
  justify-content: center;
}
.w4-slider__stars .w4-star {
  width: 24px;
  height: 24px;
}
.w4-slider__text {
  font-size: 18px;
  line-height: 1.7;
  color: var(--wom-gray-700);
  max-width: 560px;
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.w4-slider__author {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.w4-slider__author-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--wom-dark);
}
.w4-slider__author-date {
  font-size: 13px;
  color: var(--wom-gray-400);
}
.w4-slider__source {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--wom-gray-400);
}
.w4-slider__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}
.w4-slider__nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--wom-gray-200);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--wom-gray-500);
  transition: border-color 0.15s, color 0.15s;
}
.w4-slider__nav-btn:hover {
  border-color: var(--wom-gray-400);
  color: var(--wom-dark);
}
.w4-slider__dots {
  display: flex;
  gap: 8px;
}
.w4-slider__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wom-gray-300);
}
.w4-slider__dot--active {
  background: var(--wom-orange);
  width: 24px;
  border-radius: 4px;
}
.w4-slider__footer {
  margin-top: 16px;
  text-align: center;
  font-size: 12px;
  color: var(--wom-gray-400);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}


/* ============================================
   8. FLOATING CORNER BADGE + EXPANDABLE PANEL
   ============================================ */
.w4-corner {
  font-family: var(--wom-font-body);
  position: fixed;
  bottom: 24px;
  left: 24px;
  right: auto;
  background: white;
  border-radius: var(--wom-radius);
  padding: 16px 20px;
  box-shadow: var(--wom-shadow-lg);
  border: 1px solid var(--wom-gray-200);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
/* Bottom-right positioning */
[data-position="bottom-right"] .w4-corner {
  left: auto;
  right: 24px;
}
.w4-corner:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 24px -6px rgba(0,0,0,0.12);
}
.w4-corner__ratings {
  display: flex;
  align-items: center;
  gap: 20px;
}
.w4-corner__rating-group {
  display: flex;
  align-items: center;
  gap: 10px;
}
.w4-corner__score {
  font-family: var(--wom-font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--wom-dark);
  line-height: 1;
}
.w4-corner__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.w4-corner__count {
  font-size: 13px;
  color: var(--wom-gray-500);
}
.w4-corner__divider {
  width: 1px;
  height: 40px;
  background: var(--wom-gray-200);
}
.w4-corner__icons-overlay {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.w4-corner__icons-overlay .w4-wom-icon,
.w4-corner__icons-overlay .w4-google-icon {
  width: 26px;
  height: 26px;
  padding: 2px;
  background: white;
  border-radius: 50%;
  position: relative;
}
.w4-corner__icons-overlay .w4-wom-icon {
  z-index: 2;
}
.w4-corner__icons-overlay .w4-google-icon {
  margin-left: -8px;
  z-index: 1;
}

/* --- Expanded Review Panel --- */
.w4-panel {
  font-family: var(--wom-font-body);
  position: fixed;
  bottom: 24px;
  left: 24px;
  right: auto;
  width: 420px;
  max-height: min(700px, calc(100vh - 48px));
  /* User-editable via dashboard colour pickers */
  --w4-panel-header-bg: #f5f5f5;
  --w4-panel-body-bg: white;
  --w4-panel-btn-bg: var(--wom-orange);
  background: var(--w4-panel-body-bg);
  border-radius: var(--wom-radius-lg);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.2);
  border: 1px solid var(--wom-gray-200);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 9999;
}
/* Bottom-right positioning */
[data-position="bottom-right"] .w4-panel {
  left: auto;
  right: 24px;
}

.w4-panel__header {
  background: var(--w4-panel-header-bg);
  color: var(--wom-dark);
  padding: 24px 24px 20px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--wom-gray-200);
}
.w4-panel__header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.w4-panel__review-count {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wom-gray-500);
}
.w4-panel__close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--wom-gray-200);
  border: none;
  color: var(--wom-gray-600);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.w4-panel__close:hover {
  background: var(--wom-gray-300);
}
.w4-panel__biz-name {
  font-family: var(--wom-font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 12px;
}
.w4-panel__header-ratings {
  display: flex;
  align-items: center;
  gap: 20px;
}
.w4-panel__header-rating {
  display: flex;
  align-items: center;
  gap: 8px;
}
.w4-panel__header-rating .w4-wom-icon,
.w4-panel__header-rating .w4-google-icon {
  width: 22px;
  height: 22px;
}
.w4-panel__header-score {
  font-family: var(--wom-font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}
.w4-panel__header-stars .w4-star {
  width: 16px;
  height: 16px;
}
.w4-panel__header-stars .svg-star {
  fill: var(--wom-star);
}

.w4-panel__toolbar {
  padding: 14px 24px;
  border-bottom: 1px solid var(--wom-gray-200);
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.w4-panel__filter-pills {
  display: flex;
  gap: 6px;
}
.w4-panel__filter-pill {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 100px;
  border: 1px solid var(--wom-gray-200);
  background: white;
  color: var(--wom-gray-600);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}
.w4-panel__filter-pill--active {
  border-color: var(--wom-orange);
  background: var(--wom-orange-light);
  color: var(--wom-orange);
}

.w4-panel__reviews {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.w4-panel__review {
  background: white;
  border-radius: var(--wom-radius-sm);
  padding: 16px;
  border: 1px solid var(--wom-gray-100);
}
.w4-panel__review-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
}
.w4-panel__review-author {
  display: flex;
  align-items: center;
  gap: 10px;
}
.w4-panel__review-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
}
.w4-panel__review-info .w4-stars {
  width: 100%;
  order: 1;
}
.w4-panel__review-name {
  font-family: var(--wom-font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--wom-dark);
}
.w4-panel__review-date {
  font-size: 12px;
  color: var(--wom-gray-400);
}
.w4-panel__review-source {
  width: 20px;
  height: 20px;
  flex-shrink: 0;

  display: inline-block;
}
.w4-panel__review-text {
  font-size: 14px;
  color: var(--wom-gray-700);
  line-height: 1.55;
}

.w4-panel__footer {
  padding: 14px 24px;
  border-top: 1px solid var(--wom-gray-200);
  background: white;
  text-align: center;
  flex-shrink: 0;
}
.w4-panel__load-more {
  font-family: var(--wom-font-body);
  width: 100%;
  padding: 10px;
  background: var(--w4-panel-btn-bg);
  color: white;
  border: none;
  border-radius: var(--wom-radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, filter 0.15s;
}
.w4-panel__load-more:hover {
  filter: brightness(0.88);
}
.w4-panel__powered {
  font-size: 11px;
  color: var(--wom-gray-400);
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.w4-panel__powered .w4-powered-link {
  color: inherit;
  font-size: inherit;
}

/* ============================================
   SVGs inline
   ============================================ */
.svg-star {
  fill: var(--wom-star);
}
.svg-star-empty {
  fill: var(--wom-gray-300);
}

/* --- Powered by link --- */
.w4-powered-link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: inherit;
}
.w4-powered-link:hover {
  text-decoration: underline;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 600px) {
  /* --- Carousel --- */
  .w4-carousel__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
  }
  .w4-carousel__ratings { flex-wrap: wrap; gap: 12px; }
  .w4-carousel__rating-score { font-size: 22px; }
  .w4-carousel__divider { display: none; }
  .w4-carousel__nav { display: none; }
  .w4-carousel__card {
    flex: 0 0 100%;
    padding: 16px;
  }
  .w4-carousel__footer { padding: 12px 16px; }

  /* --- Feed --- */
  .w4-feed { max-width: 100%; }
  .w4-feed__header { padding: 16px; }
  .w4-feed__header-ratings {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .w4-feed__header-score { font-size: 22px; }
  .w4-feed__header-divider { display: none; }
  .w4-feed__list { max-height: 500px; }
  .w4-feed__item { padding: 14px 16px; }
  .w4-feed__footer { padding: 12px; }

  /* --- Rating box horizontal --- */
  .w4-ratingbox {
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 12px;
    align-items: flex-start;
  }
  .w4-ratingbox__score { font-size: 22px; }
  .w4-ratingbox__divider { display: none; }

  /* --- Inline badge --- */
  .w4-inline {
    gap: 6px;
    padding: 8px 10px;
    flex-wrap: wrap;
  }
  .w4-inline__score { font-size: 14px; }
  .w4-inline .w4-star { width: 12px; height: 12px; }
  .w4-inline__divider { display: none; }

  /* --- Corner badge --- */
  /* Corner badge: no mobile overrides — stays consistent like a fixed overlay */

  /* --- Expanded panel --- */
  .w4-panel {
    width: calc(100% - 16px);
    max-width: 100%;
    max-height: calc(100vh - 80px);
    left: 8px;
    right: 8px;
    bottom: 8px;
  }
  .w4-panel__header { padding: 18px 16px 14px; }
  .w4-panel__biz-name { font-size: 20px; }
  .w4-panel__header-ratings { flex-wrap: wrap; gap: 12px; }
  .w4-panel__toolbar { padding: 10px 16px; }
  .w4-panel__reviews { padding: 12px 16px; }
  .w4-panel__review { padding: 14px; }
  .w4-panel__footer { padding: 12px 16px; }

  /* --- Masonry --- */
  /* Masonry has its own responsive breakpoints (1024/768/480) — no override needed here */

  /* --- Slider --- */
  .w4-slider__card { padding: 28px 20px; min-height: 280px; }
  .w4-slider__text { font-size: 16px; -webkit-line-clamp: 4; }

  /* --- Slider Badge --- */
  .w4-sb { flex-direction: column; gap: 12px; }
  .w4-sb__badge {
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    gap: 16px;
  }
  .w4-sb__badge-inner { align-items: flex-start; }
  .w4-sb__badge-score { font-size: 32px; }
  .w4-sb__badge-label { font-size: 14px; }
  .w4-sb__badge-logo { display: none; }
  .w4-sb__nav { display: none; }
  .w4-sb__track { padding: 0; gap: 12px; }
  .w4-sb__card {
    flex: 0 0 calc(100% - 8px);
    padding: 16px;
  }
}

/* ============================================
   9. SLIDER BADGE (badge left + card slider right)
   Light-border style: each element is independently bordered.
   ============================================ */
.w4-sb {
  font-family: var(--wom-font-body);
  display: flex;
  gap: 16px;
  align-items: stretch;
}

/* Left badge panel — standalone bordered card */
.w4-sb__badge {
  width: 220px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  text-align: center;
  background: white;
  border: 1px solid var(--wom-gray-200);
  border-radius: var(--wom-radius-lg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.w4-sb__badge-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: center;
}

.w4-sb__badge-label {
  font-family: var(--wom-font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wom-orange);
  margin-top: 4px;
}

.w4-sb__badge-score {
  font-family: var(--wom-font-display);
  font-size: 40px;
  font-weight: 700;
  color: var(--wom-dark);
  line-height: 1;
}

.w4-sb__badge-stars {
  display: flex;
  justify-content: center;
}

.w4-sb__badge-count {
  font-size: 12px;
  color: var(--wom-gray-500);
}

.w4-sb__badge-divider {
  width: 40px;
  height: 1px;
  background: var(--wom-gray-200);
  margin: 4px 0;
}

.w4-sb__badge-google {
  display: flex;
  align-items: center;
  gap: 6px;
}

.w4-sb__badge-google-score {
  font-family: var(--wom-font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--wom-dark);
}

.w4-sb__badge-logo {
  margin-top: auto;
  padding-top: 16px;
  /* The Word of Mouth wordmark draws with currentColor, so a hardcoded
     near-black here made the logo vanish in dark mode. */
  color: var(--wom-dark);
}
.w4-sb__badge-logo a {
  display: block;
  line-height: 0;
  color: inherit;
}
.w4-sb__badge-logo .w4-wom-full {
  width: 140px;
  height: auto;
}

/* Right slider section */
.w4-sb__slider {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

.w4-sb__nav {
  position: absolute;
  top: -4px;
  right: 0;
  display: flex;
  gap: 6px;
  z-index: 1;
}

.w4-sb__nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--wom-gray-300);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--wom-gray-600);
}
.w4-sb__nav-btn:hover {
  background: var(--wom-gray-50);
  border-color: var(--wom-gray-400);
}

/* Card track */
.w4-sb__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 1;
  padding: 4px 0;
}
.w4-sb__track::-webkit-scrollbar { display: none; }

/* Review cards — individually bordered */
.w4-sb__card {
  flex: 0 0 300px;
  scroll-snap-align: start;
  padding: 24px;
  background: white;
  border: 1px solid var(--wom-gray-200);
  border-radius: var(--wom-radius-lg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.w4-sb__card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.w4-sb__card-author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.w4-sb__card-author > div:not(.w4-avatar) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
}
.w4-sb__card-author > div:not(.w4-avatar) > .w4-stars {
  width: 100%;
  order: 1;
}

.w4-sb__card-name {
  font-family: var(--wom-font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--wom-dark);
}

.w4-sb__card-date {
  font-size: 12px;
  color: var(--wom-gray-400);
}

.w4-sb__card-title {
  font-family: var(--wom-font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--wom-dark);
  line-height: 1.3;
  margin-top: 6px;
}

.w4-sb__card-text {
  font-size: 14px;
  color: var(--wom-gray-600);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================
   10. BADGE BUTTON (compact horizontal trust badge)
   ============================================ */
.w4-bb {
  font-family: var(--wom-font-body);
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  background: white;
  border: 1px solid var(--wom-gray-200);
  border-radius: var(--wom-radius-lg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  text-decoration: none;
  color: inherit;
  gap: 16px;
  transition: box-shadow 0.2s;
  cursor: pointer;
}
.w4-bb:hover {
  box-shadow: var(--wom-shadow-md);
}

.w4-bb__label {
  font-family: var(--wom-font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wom-orange);
  white-space: nowrap;
}

.w4-bb__count {
  font-size: 12px;
  color: var(--wom-gray-500);
  white-space: nowrap;
}

.w4-bb__logo {
  flex-shrink: 0;
  /* Same as the slider badge: the wordmark is currentColor, so this has to
     follow the theme or the logo disappears on a dark background. */
  color: var(--wom-dark);
  line-height: 0;
}
.w4-bb__logo .w4-wom-full {
  width: 120px;
  height: auto;
}

/* ============================================
   DARK MODE
   Applied via data-theme="dark" on widget container
   ============================================ */

/* Override design tokens within dark containers */
[data-theme="dark"] {
  --wom-dark: #EDEDF0;
  --wom-gray-50: #1a1a2e;
  --wom-gray-100: #1e1e32;
  --wom-gray-200: #2d2d44;
  --wom-gray-300: #3d3d56;
  --wom-gray-400: #7a7a92;
  --wom-gray-500: #9a9ab0;
  --wom-gray-600: #b8b8cc;
  --wom-gray-700: #d0d0e0;
  --wom-orange-light: rgba(255, 72, 0, 0.12);
  --wom-google-bg: rgba(66, 133, 244, 0.12);
  --wom-shadow-sm: 0 2px 4px rgba(0,0,0,0.4);
  --wom-shadow-md: 0 4px 8px rgba(0,0,0,0.5);
  --wom-shadow-lg: 0 10px 15px rgba(0,0,0,0.45);
  --w4-panel-header-bg: #1e1e32;
  --w4-panel-body-bg: #141422;
}

/* Cards and surfaces */
[data-theme="dark"] .w4-carousel__card,
[data-theme="dark"] .w4-feed__item,
[data-theme="dark"] .w4-masonry__card,
[data-theme="dark"] .w4-slider__card,
[data-theme="dark"] .w4-corner,
[data-theme="dark"] .w4-ratingbox,
[data-theme="dark"] .w4-ratingbox-vert,
[data-theme="dark"] .w4-inline,
[data-theme="dark"] .w4-slider__nav-btn,
[data-theme="dark"] .w4-sb__card,
[data-theme="dark"] .w4-bb {
  background: #1e1e32;
  border-color: #2d2d44;
}

/* Carousel/feed outer wrapper */
[data-theme="dark"] .w4-carousel,
[data-theme="dark"] .w4-feed {
  border-color: #2d2d44;
}

/* Avatars */
[data-theme="dark"] .w4-avatar--wom,
[data-theme="dark"] .w4-avatar--google {
  background: #2d2d44;
  color: #d0d0e0;
}

/* The thin separators sit on gray-300, which is nearly invisible against the
   dark card behind them — the inline rating's divider measured 1.5:1. Lifting
   them keeps the two sources looking like two things rather than one run-on. */
[data-theme="dark"] .w4-inline__divider,
[data-theme="dark"] .w4-ratingbox__divider,
[data-theme="dark"] .w4-ratingbox-vert__divider,
[data-theme="dark"] .w4-carousel__divider,
[data-theme="dark"] .w4-footer-sep,
[data-theme="dark"] .w4-masonry__header-divider {
  background: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.22);
}

/* Carousel and slider-badge arrows have the same problem the grid's had: the
   dark theme paints a fixed near-black button, so on any dark background that
   isn't near-black — a navy band, a charcoal panel — the button is the same
   brightness as what's behind it and the arrows disappear. Ryan hit this on a
   dark-mode preview. Same translucent-white treatment as the grid, which
   lightens whatever is actually there instead of guessing at it. */
[data-theme="dark"] .w4-carousel__nav-btn,
[data-theme="dark"] .w4-sb__nav-btn {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}
[data-theme="dark"] .w4-carousel__nav-btn:hover,
[data-theme="dark"] .w4-sb__nav-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Grid and Masonry get their own dark surface, like the carousel and feed.

   Every other dark widget paints its own panel, so it reads the same wherever
   the customer drops it. The grid and masonry didn't: they sat straight on the
   host page, so their header text (#EDEDF0 in dark mode) and the translucent
   white arrows only worked if the page behind them was also dark. On a light
   page, and in the dashboard preview, the review count and the arrows were
   invisible. Ryan hit both. Giving them the same panel the carousel has means
   what's behind the widget no longer decides whether it's readable. */
[data-theme="dark"] .w4-masonry {
  background: #1e1e32;
  border: 1px solid #2d2d44;
  border-radius: var(--wom-radius-lg);
  padding: 20px;
}

/* Grid arrows.

   The rest of the dark theme paints fixed near-black surfaces, which assumes
   the widget is sitting on a near-black page. Customers drop it into whatever
   dark section they already have — a navy band, a charcoal panel — and a
   #1e1e32 button on a #21374a panel is the same brightness as the panel, so
   the arrows vanish. Translucent white lightens whatever is actually behind
   it, so it reads on any dark background without us having to guess. */
[data-theme="dark"] .w4-masonry__nav-btn {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}
[data-theme="dark"] .w4-masonry__nav-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Slider nav hover */
[data-theme="dark"] .w4-slider__nav-btn:hover {
  border-color: #7a7a92;
}

/* Carousel, Feed wrappers */
[data-theme="dark"] .w4-carousel,
[data-theme="dark"] .w4-feed {
  background: #1e1e32;
  border-color: #2d2d44;
}

/* Expanded panel — override local CSS variables */
[data-theme="dark"] .w4-panel {
  --w4-panel-header-bg: #1e1e32;
  --w4-panel-body-bg: #141422;
  border-color: #2d2d44;
}
[data-theme="dark"] .w4-panel__review {
  background: #1e1e32;
  border-color: #2d2d44;
}
[data-theme="dark"] .w4-panel__footer {
  background: #141422;
  border-color: #2d2d44;
}
[data-theme="dark"] .w4-panel__toolbar {
  background: #1e1e32;
  border-color: #2d2d44;
}
[data-theme="dark"] .w4-panel__filter-pill {
  background: #1e1e32;
  border-color: #2d2d44;
}

/* Slider Badge in dark */
[data-theme="dark"] .w4-sb__badge {
  background: #1e1e32;
  border-color: #2d2d44;
}
[data-theme="dark"] .w4-sb__badge-logo,
[data-theme="dark"] .w4-bb__logo {
  color: #EDEDF0;
}

/* Image overlay badge in dark */
[data-theme="dark"] .w4-masonry__card-imgs-more {
  background: rgba(0, 0, 0, 0.75);
}

/* ============================================
   CLS PREVENTION — reserve space before JS renders
   ============================================ */
.wom-widget-v4[data-type="carousel"]            { min-height: 300px; }
.wom-widget-v4[data-type="feed"]                { min-height: 400px; }
.wom-widget-v4[data-type="masonry"]             { min-height: 400px; }
.wom-widget-v4[data-type="testimonial-slider"]  { min-height: 300px; }
.wom-widget-v4[data-type="rating-box-horizontal"] { min-height: 70px; }
.wom-widget-v4[data-type="rating-box-vertical"]   { min-height: 120px; }
.wom-widget-v4[data-type="inline-rating"]       { min-height: 40px; }
.wom-widget-v4[data-type="slider-badge"]        { min-height: 220px; }
.wom-widget-v4[data-type="badge-button"]       { min-height: 140px; }

/* ============================================
   LOADING STATE
   ============================================ */
.wom-widget-v4--loading {
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9CA3AF;
  font-size: 14px;
}

/* ============================================
   ERROR / FALLBACK STATE
   ============================================ */
.wom-widget-v4--error {
  text-align: center;
  padding: 20px;
  font-size: 13px;
  color: #9CA3AF;
}
.wom-widget-v4--error a {
  color: #FF4800;
  text-decoration: none;
}