.oeltek-rc-wrap{width:100%;max-width:var(--oeltek-rc-max,1200px);margin:8px auto 0;padding:8px 0;border-top:1px solid rgba(0,0,0,.06)}

/* Ensure block sits below floated/column layout on desktop and spans full width */
.oeltek-rc-wrap { clear: both; display: block; }
.woocommerce div.product .oeltek-rc-wrap { grid-column: 1 / -1; }


.oeltek-rc-row{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 6px}
.oeltek-rc-row::-webkit-scrollbar{height:6px}
.oeltek-rc-row::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:3px}
.oeltek-rc-card{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:96px;text-decoration:none;scroll-snap-align:start}
.oeltek-rc-avatar{position:relative;display:block;width:72px;height:72px;border-radius:50%;padding:3px}
.oeltek-rc-ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(#ff5ea3,#ffd25e,#8a7dff,#ff5ea3);filter:saturate(1.1);}
.oeltek-rc-avatar img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;background:#f6f7f8;border:3px solid #fff;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.oeltek-rc-title{margin-top:6px;text-align:center;color:inherit;font-size:12px;line-height:1.2;max-width:92px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:480px){
 .oeltek-rc-card{width:84px}
 .oeltek-rc-avatar{width:64px;height:64px}
}

/* --- Placement / full-width on desktop & tablet --- */
.oeltek-rc-wrap { 
  clear: both;            /* drop below gallery+summary */
  width: 100%;
  max-width: none;        /* remove centering cap */
  margin: 12px 0 0;
}
.woocommerce div.product .oeltek-rc-wrap { grid-column: 1 / -1; }

/* --- Start from right side (RTL row) --- */
.oeltek-rc-row {
  direction: rtl;         /* first item sits on the right */
  padding-inline: 0;      /* no extra side padding */
  gap: 24px;
}

/* --- Solid ring + gray text --- */
.oeltek-rc-ring { background: #555; }  /* dark gray, no gradient */
.oeltek-rc-title { color: #666; }      /* gray caption */

/* --- Larger circles on desktop/tablet only (≈ +50%) --- */
@media (min-width: 768px) {
  .oeltek-rc-card   { width: 144px; }     /* was 96px */
  .oeltek-rc-avatar { width: 108px; height: 108px; padding: 4px; } /* was 72px */
}

/* placement & full width on desktop/tablet */
.oeltek-rc-wrap { clear: both; width: 100%; max-width: none; margin: 12px 0 0; }
.woocommerce div.product .oeltek-rc-wrap { grid-column: 1 / -1; }

/* start from right (RTL row) */
.oeltek-rc-row { direction: rtl; padding-inline: 0; }

/* lighter, thinner ring and gray text */
.oeltek-rc-ring { background: #9aa0a6; }   /* light gray */
.oeltek-rc-title { color: #666; }

/* ~40% larger on desktop/tablet only */
@media (min-width: 768px) {
  .oeltek-rc-card   { width: 134px; }                       /* ~+40% */
  .oeltek-rc-avatar { width: 101px; height: 101px; padding: 2px; } /* thinner ring */
}

/* --- MOBILE: make circles ~40% larger --- */
.oeltek-rc-card   { width: 118px; }                 /* was 84px */
.oeltek-rc-avatar { width: 90px; height: 90px; padding: 2px; } /* thin ring */
.oeltek-rc-title  { font-size: 13px; }              /* slightly larger */

/* keep row from-right on mobile too (in case it was overridden) */
.oeltek-rc-row { direction: rtl; }

/* --- DESKTOP/TABLET: keep previous larger sizes --- */
@media (min-width: 768px) {
  .oeltek-rc-card   { width: 134px; }
  .oeltek-rc-avatar { width: 101px; height: 101px; padding: 2px; }
}


/* Mobile spacing so the block breathes under gallery & above title */
@media (max-width: 767px) {
  #related-circles-lib.oeltek-rc-wrap {
    margin-top: 12px;     /* space below gallery */
    margin-bottom: 12px;  /* space above title/price/short desc */
    clear: both;
    width: 100%;
  }
}

/* === Related Circles: +20% size, dim thumbnail, big play icon === */

/* 1) Make sure avatar can host an overlay */
.oeltek-rc-avatar {
  position: relative;             /* for ::after overlay */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;               /* keep overlay clipped in the circle */
}

/* 2) QUICK, THEME-SAFE SIZE BOOST (+20%) 
      This scales the whole card (avatar + title) without breaking layout. */
.oeltek-rc-card {
  transform: scale(1.2);          /* +20% */
  transform-origin: center;
}

/* If your row feels too tight after scaling, gently increase the gap */
.oeltek-rc-row {
  --rc-gap: 1.2rem;               /* adjust if you already have a gap variable */
  gap: var(--rc-gap, 1.2rem);     /* fallback gap if none existed */
}

/* 3) Dim the thumbnail image ~20% so the play icon stands out */
.oeltek-rc-avatar img {
  opacity: 0.8;                   /* 0.8 = 20% more transparent */
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* 4) Big play icon overlay inside each circle */
.oeltek-rc-avatar::after {
  content: "\25B6";               /* Unicode ► (play triangle) */
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 700;
  /* Responsive size: scales with the avatar’s box */
  font-size: clamp(20px, 40%, 56px);
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  opacity: 0.95;
  pointer-events: none;           /* clicks go to the link/image normally */
}

/* 5) Nice hover/press feedback (optional) */
.oeltek-rc-card:hover .oeltek-rc-avatar img,
.oeltek-rc-card:focus .oeltek-rc-avatar img {
  opacity: 0.9;
  transform: scale(1.03);
}

/* 6) Title breathing room (optional, looks better after scale) */
.oeltek-rc-title {
  margin-top: 0.5rem;
}
/* --- Prevent clipping: let the circles breathe --- */
.oeltek-rc-wrap,
.oeltek-rc-row,
.oeltek-rc-card,
.oeltek-rc-avatar {
  overflow: visible !important;   /* ensure no ancestor clips the scaled circle */
}

/* Extra vertical room so the scaled avatar isn't overlapped */
.oeltek-rc-row {
  padding-block: 10px;            /* top & bottom padding */
  align-items: center;            /* keep items centered vertically if it's a flex grid */
  gap: var(--rc-gap, 1.2rem);     /* keep your gap */
}

/* Cards as inline-flex columns so height expands naturally */
.oeltek-rc-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;                     /* stay above background strips */
  margin-block: 6px;              /* small extra room above/below */
  /* we keep the 1.2 scale you already added earlier */
}

/* Avatar is the overlay host and should not clip children */
.oeltek-rc-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;                 /* remove stray line-height that can push content */
  /* Keep your existing width/height/radius here */
}

/* --- Thumbnail dimming: ~30% more transparent (opacity 0.7) --- */
.oeltek-rc-avatar img {
  opacity: 0.7;                   /* was 0.8; now a bit dimmer */
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* --- Bigger play icon: +50% over previous --- */
.oeltek-rc-avatar::after {
  content: "\25B6";               /* ► */
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 700;
  /* was clamp(20px, 40%, 56px); now ~+50% */
  font-size: clamp(28px, 60%, 84px);
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  opacity: 0.95;
  pointer-events: none;
}

/* Optional: tiny hover feedback */
.oeltek-rc-card:hover .oeltek-rc-avatar img,
.oeltek-rc-card:focus .oeltek-rc-avatar img {
  opacity: 0.8;
  transform: scale(1.03);
}