/* keep all sizing predictable inside widget */
.repocean-reviews * {
  box-sizing: border-box;
}

/* EXTRA HARDENING */
.repocean-reviews button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  /* Themes often force min-width/min-height on all <button>s (e.g. min-width:144px,
     min-height:44px). Those aren't !important, so neutralise them here — every widget
     button (nav arrows, read more) sizes from its own width/height rules instead. */
  min-width: 0 !important;
  min-height: 0 !important;
}

/* Some themes paint the button background as an absolutely-positioned ::before/::after
   overlay (e.g. `button::before { inset:0; background: var(--secondary_bg_btn) }`),
   which our `background` rules can't reach. Kill those overlays inside the widget so the
   nav arrows / read more show their own backgrounds instead of the theme's button fill. */
.repocean-reviews button::before,
.repocean-reviews button::after {
  display: none !important;
  content: none !important;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
}
.repocean-reviews img {
  max-width: 100%;
  height: auto;
  border: 0;
}

/* Keep app block width consistent (no :has dependency) */
.shopify-app-block.repocean-has-reviews {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

/* =========================
   DARK MODE OVERRIDES
   ========================= */
.repocean-reviews.repocean-reviews--dark {
  --repocean-bg-color: #111213;
  --repocean-border-color: rgba(255, 255, 255, 0.15);
  --repocean-name-color: #ffffff;
  --repocean-text-color: #ffffff;
  --repocean-time-color: #9ca3af;
  --repocean-arrow-bg: #000000;
  --repocean-arrow-border: rgba(255, 255, 255, 0.2);
  --repocean-arrow-icon: #ffffff;

  --repocean-leave-btn-bg: #1a73e8;
  --repocean-leave-btn-border: rgba(26, 115, 232, 0.6);

  color: #ffffff;
  background-color: #000000;
}

.repocean-reviews.repocean-reviews--dark .repocean-head__line {
  color: #ffffff;
}
.repocean-reviews.repocean-reviews--dark .repocean-count {
  color: #ffffff;
}
.repocean-reviews.repocean-reviews--dark .repocean-more {
  color: #d1d5db;
}
.repocean-reviews.repocean-reviews--dark .repocean-more:hover {
  color: #ffffff;
}
.repocean-reviews.repocean-reviews--dark .repocean-card {
  box-shadow: none;
}
.repocean-reviews.repocean-reviews--dark .repocean-google-logo {
  filter: brightness(1.2);
}

/* =========================
   SECTION TITLE
   ========================= */
.repocean-reviews .repocean-section-title {
  text-align: center;
  /* 24px when headline is shown (24 + 24 = 48 above cards),
     32px when headline is hidden (matches 32 below cards). */
  margin: 0 0 24px;
  color: var(--repocean-section-title-color, inherit);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.repocean-reviews .repocean-section-title a {
  color: inherit;
  text-decoration: underline;
}
.repocean-reviews.repocean-no-headline .repocean-section-title {
  margin-bottom: 32px;
}
.repocean-reviews.repocean-ready .repocean-section-title {
  opacity: 1;
}

/* Tighten heading→description spacing when both are present */
.repocean-reviews:has(.repocean-section-description) .repocean-section-title {
  margin-bottom: 12px;
}

/* =========================
   SECTION DESCRIPTION
   ========================= */
.repocean-reviews .repocean-section-description {
  text-align: center;
  margin: 0 auto 24px;
  color: var(--repocean-text-color, inherit);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.repocean-reviews .repocean-section-description p {
  margin: 0 0 8px;
}
.repocean-reviews .repocean-section-description p:last-child {
  margin-bottom: 0;
}
.repocean-reviews .repocean-section-description a {
  color: inherit;
  text-decoration: underline;
}
.repocean-reviews.repocean-ready .repocean-section-description {
  opacity: 1;
}
.repocean-reviews.repocean-no-headline .repocean-section-description {
  margin-bottom: 32px;
}

/* =========================
   HEADER (review summary)
   ========================= */
.repocean-reviews .repocean-head {
  display: flex;
  justify-content: center;
  margin: 0 0 24px;
}

.repocean-reviews .repocean-head__line {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;

  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--repocean-headline-color, inherit);
}

.repocean-reviews .repocean-stars {
  color: var(--repocean-star-color);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.repocean-reviews .repocean-count {
  text-transform: none;
  font-weight: 600;
  white-space: nowrap;
}

/* When a custom heading is present, soften the summary headline so the
   custom heading remains the dominant visual anchor. */
.repocean-reviews:has(.repocean-section-title) .repocean-head__line,
.repocean-reviews:has(.repocean-section-title) .repocean-count {
  font-weight: 400 !important;
}

.repocean-reviews .repocean-google-text {
  font-weight: 700;
  color: #1a73e8;
  font-size: 14px;
}

.repocean-reviews .repocean-google-logo {
  display: inline-block !important;
  height: 22px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  flex-shrink: 0;
  vertical-align: middle;
}

/* ==============
   Carousel / TRACK
   ============== */
.repocean-reviews .repocean-carousel-area {
  position: relative;
}
.repocean-reviews .repocean-viewport {
  position: relative;
  overflow: hidden;
  min-height: auto;
}
.repocean-reviews .repocean-track {
  display: flex;
  gap: var(--gap);
  align-items: flex-start;
  flex-wrap: nowrap;
  will-change: transform;
  transition: transform 2.2s cubic-bezier(0.25, 1, 0.5, 1);
  cursor: grab;
}
.repocean-reviews .repocean-track:active {
  cursor: grabbing;
}


/* =========
   CARD BASE
   ========= */
.repocean-reviews .repocean-card {
  background: var(--repocean-bg-color);
  border: 1px solid var(--repocean-border-color);
  border-radius: var(--repocean-card-radius);
  padding: 22px 20px;
  min-height: calc(var(--repocean-line-clamp) * 1.55em);
  box-shadow: none;
  height: auto;
  align-self: flex-start;
}

/* 1201px+: auto = 4 */
@container repocean (min-width: 1201px) {
  .repocean-reviews .repocean-card {
    flex: 0 0
      calc(
        (100% - (var(--gap) * ((var(--repocean-cards-desktop, 4)) - 1))) /
          (var(--repocean-cards-desktop, 4))
      );
    max-width: calc(
      (100% - (var(--gap) * ((var(--repocean-cards-desktop, 4)) - 1))) /
        (var(--repocean-cards-desktop, 4))
    );
  }
}

/* 901–1200px: auto = 3 */
@container repocean (min-width: 901px) and (max-width: 1200px) {
  .repocean-reviews .repocean-card {
    flex: 0 0
      calc(
        (100% - (var(--gap) * ((var(--repocean-cards-desktop, 3)) - 1))) /
          (var(--repocean-cards-desktop, 3))
      );
    max-width: calc(
      (100% - (var(--gap) * ((var(--repocean-cards-desktop, 3)) - 1))) /
        (var(--repocean-cards-desktop, 3))
    );
  }
}

/* 2 cards (tablet) */
@container repocean (min-width: 701px) and (max-width: 900px) {
  .repocean-reviews .repocean-card {
    flex: 0 0 calc((100% - var(--gap)) / 2);
    max-width: calc((100% - var(--gap)) / 2);
  }
}

/* 1 card (mobile) */
@container repocean (max-width: 700px) {
  .repocean-reviews .repocean-track {
    gap: 0;
  }

  .repocean-reviews .repocean-card {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }

  .repocean-reviews .repocean-nav-wrap {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 14px;
  }

  .repocean-reviews .repocean-nav {
    position: static !important;
    transform: none !important;
  }

  .repocean-reviews .repocean-head__line {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 6px 8px;
  }

  .repocean-reviews .repocean-count {
    white-space: nowrap;
  }

  .repocean-reviews .repocean-count::before {
    content: "";
    flex-basis: 100%;
    width: 0;
    display: block;
  }

  .repocean-reviews .repocean-google-logo {
    height: 22px !important;
    margin-left: 6px;
    flex: 0 0 auto;
  }
}

/* ============================
   CARD HEADER
   ============================ */
.repocean-reviews .repocean-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 5px;
}
.repocean-reviews .repocean-left {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}
.repocean-reviews .repocean-left > div:last-child {
  min-width: 0;
}
.repocean-reviews .repocean-avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50%;
  background: #374151;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  overflow: hidden;
  margin-top: 2px;
}
.repocean-reviews .repocean-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  border-radius: 50%;
}
.repocean-reviews .repocean-name {
  font-family: inherit;
  font-weight: 700;
  color: var(--repocean-name-color);
  font-size: 15px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.repocean-reviews .repocean-time {
  font-family: inherit;
  font-size: 13px;
  color: var(--repocean-time-color);
  margin-top: 2px;
}

/* ====================
   STARS + VERIFIED ROW
   ==================== */
.repocean-reviews .repocean-stars-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 5px;
}
.repocean-reviews .repocean-stars {
  color: var(--repocean-star-color);
  font-size: 18px;
  letter-spacing: 0.04em;
}

/* ====================
   Google Icon
   ==================== */
.repocean-reviews repocean-googleicon {
  display: inline-block;
  width: 20px !important;
  height: 20px !important;
  background: url(/assets/1Iex1RUmo1TF.webp)
    center/contain no-repeat;
  flex: 0 0 20px;
}

/* =============
   REVIEW TEXT
   ============= */
.repocean-reviews .repocean-text {
  font-family: var(--font-body-family);
  font-weight: var(--font-body-weight);
  font-style: var(--font-body-style);
  color: var(--repocean-text-color);
  position: relative;
  line-height: 1.55;
  font-size: 14px;
  min-height: var(--repocean-clamp-h);
  display: -webkit-box;
  -webkit-line-clamp: var(--repocean-line-clamp);
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.repocean-reviews .repocean-card.clamped .repocean-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3.4em;
  background: linear-gradient(to bottom, transparent, var(--repocean-bg-color));
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.repocean-reviews .repocean-card.expanded .repocean-text::after {
  opacity: 0;
}
.repocean-reviews .repocean-card.expanded .repocean-text {
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* ============================
   READ MORE / SHOW LESS BUTTON
   ============================ */
.repocean-reviews .repocean-more {
  display: block;
  margin-top: 12px;
  /* Themes commonly float all <button>s (e.g. `button { float: left }`),
     which shoves the flex photos row beside the button. Force it back. */
  float: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #8f9aa6 !important;
  font-weight: 550 !important;
  cursor: pointer;
  padding: 0 !important;
  font-size: 14px !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  line-height: normal !important;
  transition: color 0.2s ease;
}
.repocean-reviews .repocean-more:hover {
  color: #1a73e8 !important;
  background: transparent !important;
}

/* reserve button height so all cards match */
.repocean-reviews .repocean-more[hidden] {
  display: block !important;
  visibility: hidden;
}

/* =========================
   NAV ARROWS
   ========================= */
/* Low-specificity base reset — neutralises theme button styles bleeding in.
   Uses :where() so specificity stays 0 and our specific rules below win naturally. */
:where(.repocean-reviews button) {
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  text-transform: none;
  letter-spacing: normal;
  text-decoration: none;
  box-shadow: none;
  min-width: 0;
}

.repocean-reviews .repocean-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;

  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: var(--repocean-arrow-bg) !important;
  border: 1px solid var(--repocean-arrow-border) !important;

  display: none; /* JS sets inline display:flex once data loads */
  align-items: center;
  justify-content: center;

  font-size: 0 !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;

  cursor: pointer;
  user-select: none;
  color: var(--repocean-arrow-icon) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
  transition: all 0.25s ease;
}


.repocean-reviews .repocean-nav--prev {
  left: -17px;
}
.repocean-reviews .repocean-nav--next {
  right: -17px;
}

/* RTL: swap arrow positions */
.repocean-reviews[dir="rtl"] .repocean-nav--prev {
  left: auto;
  right: -17px;
}
.repocean-reviews[dir="rtl"] .repocean-nav--next {
  right: auto;
  left: -17px;
}


.repocean-badge {
  display: inline-flex;
  width: 16px !important;
  height: 16px !important;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%234285f4' fill-rule='evenodd' d='M7.29.34c.17-.22.43-.34.71-.34s.54.13.71.34l.78 1.01c.06.08.15.14.25.16.1.03.2.02.3-.02l1.18-.48c.26-.1.54-.08.78.05.24.14.4.38.44.65l.18 1.26c.01.1.06.19.13.26.07.07.16.12.26.13l1.26.18c.27.04.51.2.65.44.14.24.16.53.05.78l-.48 1.18c-.04.09-.04.2-.02.3.03.1.08.18.16.25l1.01.79c.22.17.34.43.34.71s-.13.54-.34.71l-1.01.78c-.08.06-.14.15-.16.25-.03.1-.02.2.02.3l.48 1.18c.1.26.08.54-.05.78-.14.24-.38.4-.65.44l-1.26.18c-.1.01-.19.06-.26.13s-.12.16-.13.26l-.18 1.27c-.04.27-.2.51-.44.65-.24.14-.53.16-.78.05l-1.18-.48c-.09-.04-.2-.04-.3-.02-.1.03-.18.08-.25.16l-.78 1.01c-.17.22-.43.34-.71.34s-.54-.13-.71-.34l-.78-1.01c-.06-.08-.15-.14-.25-.16-.1-.03-.2-.02-.3.02l-1.18.48c-.26.1-.54.08-.78-.05-.24-.14-.4-.38-.44-.65l-.18-1.27c-.01-.1-.06-.19-.13-.26-.07-.07-.16-.12-.26-.13l-1.26-.18c-.27-.04-.51-.2-.65-.44-.14-.24-.16-.53-.05-.78l.48-1.18c.04-.09.04-.2.02-.3.03-.1.08-.18.16-.25l-1.01-.78c-.22-.17-.34-.43-.34-.71s.13-.54.34-.71l1.01-.79c.08-.06.14-.15.16-.25.03-.1.02-.2-.02-.3l-.48-1.18c-.1-.26-.08-.54.05-.78.14-.24.38-.4.65-.44l1.26-.18c.1-.01.19-.06.26-.13.07-.07.12-.16.13-.26l.18-1.26c.04-.27.2-.51.44-.65.24-.14.53-.16.78-.05l1.18.48c.09.04.2.04.3.02.1-.03.18-.08.25-.16L7.29.34Z'/%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M7.74 8.05l2.49-2.5c.19-.19.49-.19.67 0l.67.67c.19.19.19.49 0 .67l-3.32 3.33-.7.7c-.19.19-.48.19-.67 0l-.7-.7-1.74-1.74c-.19-.19-.19-.48 0-.67l.67-.67c.19-.19.49-.19.67 0l1.32 1.32 1.38 1.38-.74-1.79Z'/%3E%3C/svg%3E");
}

.repocean-reviews .repocean-review-photos {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  /* Never wrap alongside a floated sibling (e.g. a theme-floated read-more) */
  clear: both;
}

/* Root class prefix raises specificity to (0,2,1) so aggressive theme rules
   like `body > div[id] img { height: auto !important }` can't override the
   thumbnail size. aspect-ratio is a safety net that keeps photos square even
   if a still-higher-specificity theme rule forces the height to auto. */
.repocean-reviews .repocean-review-photos img {
  width: 64px !important;
  height: 64px !important;
  aspect-ratio: 1 / 1;
  object-fit: cover !important;
  border-radius: 6px;
  cursor: pointer;
  flex: 0 0 auto;
}

/* =========================
   LEAVE A REVIEW CTA
   ========================= */
.repocean-reviews .repocean-leave-review {
  margin-top: 32px;
  display: flex;
  justify-content: center;
}

/* Hide only when hidden attribute is present */
.repocean-reviews .repocean-leave-review[hidden] {
  display: none;
}

.repocean-reviews .repocean-leave-review__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: var(--repocean-leave-btn-padding-y, 11px) var(--repocean-leave-btn-padding-x, 20px) !important;
  margin: 0 !important;

  border-radius: var(--repocean-leave-btn-radius, 12px) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: none !important;

  background: var(--repocean-leave-btn-bg, #1a73e8) !important;
  color: var(--repocean-leave-btn-text, #fff) !important;
  border: 1px solid var(--repocean-leave-btn-border, rgba(26, 115, 232, 0.5)) !important;
  box-shadow: none !important;

  min-width: 0 !important;
  width: auto !important;
  height: auto !important;

  transition:
    transform 0.15s ease,
    opacity 0.15s ease,
    border-color 0.15s ease;
  text-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.repocean-reviews .repocean-leave-review__btn:hover {
  transform: translateY(-1px);
  opacity: 0.95;
  background: var(--repocean-leave-btn-bg, #1a73e8) !important;
  color: var(--repocean-leave-btn-text, #fff) !important;
}

.repocean-reviews .repocean-leave-review__btn:focus-visible {
  outline: 2px solid var(--repocean-leave-btn-border, rgba(26, 115, 232, 0.6));
  outline-offset: 2px;
}

/* Desktop: center if fewer than 4 cards */
@container repocean (min-width: 901px) {
  .repocean-reviews:has(
      .repocean-track > .repocean-card:nth-child(-n + 3):last-child
    )
    .repocean-track {
    justify-content: center;
  }

  .repocean-reviews:has(
      .repocean-track > .repocean-card:nth-child(-n + 3):last-child
    )
    .repocean-nav-wrap {
    display: none;
  }
}

.repocean-reviews .repocean-card.has-photos .repocean-text {
  min-height: var(--repocean-clamp-h-photos);
}

/* =========================
   LIGHTBOX
   ========================= */
#repocean-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  align-items: center;
  justify-content: center;
}
#repocean-lightbox[data-open] {
  display: flex;
  background: rgba(0, 0, 0, 0.92);
}
#repocean-lightbox .rpo-lb-backdrop {
  position: absolute;
  inset: 0;
}
#repocean-lightbox .rpo-lb-counter {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
  pointer-events: none;
  white-space: nowrap;
}
#repocean-lightbox .rpo-lb-close {
  position: absolute;
  top: 16px;
  right: 20px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  cursor: pointer;
  width: 40px;
  height: 40px;
  min-width: 0;
  min-height: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
#repocean-lightbox .rpo-lb-close:hover {
  background: rgba(255, 255, 255, 0.25);
}
#repocean-lightbox .rpo-lb-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
#repocean-lightbox .rpo-lb-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
#repocean-lightbox .rpo-lb-img {
  width: 88vw;
  height: 88vh;
  object-fit: contain;
  display: block;
  border-radius: 6px;
}
#repocean-lightbox .rpo-lb-prev,
#repocean-lightbox .rpo-lb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  cursor: pointer;
  width: 48px;
  height: 48px;
  min-width: 0;
  min-height: 0;
  border-radius: 50%;
  opacity: 0.9;
  transition: background 0.15s;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
#repocean-lightbox .rpo-lb-prev {
  left: 20px;
}
#repocean-lightbox .rpo-lb-next {
  right: 20px;
}
#repocean-lightbox .rpo-lb-prev:hover,
#repocean-lightbox .rpo-lb-next:hover {
  background: rgba(255, 255, 255, 0.25);
  opacity: 1;
}
#repocean-lightbox .rpo-lb-prev[hidden],
#repocean-lightbox .rpo-lb-next[hidden] {
  display: none;
}
@media (max-width: 600px) {
  #repocean-lightbox .rpo-lb-img {
    width: 94vw;
    height: 82vh;
  }
  #repocean-lightbox .rpo-lb-prev,
  #repocean-lightbox .rpo-lb-next {
    width: 40px;
    height: 40px;
  }
  #repocean-lightbox .rpo-lb-prev {
    left: 10px;
  }
  #repocean-lightbox .rpo-lb-next {
    right: 10px;
  }
}